Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: show the error message if images.loaderFile doesn't export a default function #64036

Merged
merged 21 commits into from
Apr 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
04eaa77
feat: show the concrete error message if the loader file don't export…
ojj1123 Apr 3, 2024
259fddc
Merge branch 'canary' into fix/custom-loader-config
ojj1123 Apr 3, 2024
732940d
Merge branch 'canary' into fix/custom-loader-config
styfle Apr 3, 2024
fabbe3e
Merge branch 'canary' into fix/custom-loader-config
ojj1123 Apr 4, 2024
c272734
test: loader file named export error
ojj1123 Apr 4, 2024
45432bb
fix: check defaultLoader only in getImgProps
ojj1123 Apr 4, 2024
90d5bd5
test: getImageProps
ojj1123 Apr 4, 2024
135be5f
Merge branch 'canary' into fix/custom-loader-config
ojj1123 Apr 4, 2024
93548e7
revert __NEXT_IMAGE_OPTS
ojj1123 Apr 5, 2024
385345a
add test case
ojj1123 Apr 5, 2024
f10b06d
Merge branch 'canary' into fix/custom-loader-config
ojj1123 Apr 5, 2024
80b8f13
Merge branch 'canary' into fix/custom-loader-config
ojj1123 Apr 7, 2024
fce6313
Merge branch 'canary' into fix/custom-loader-config
ojj1123 Apr 8, 2024
51026fc
Merge branch 'canary' into fix/custom-loader-config
ojj1123 Apr 8, 2024
fc1a35e
Merge branch 'canary' into fix/custom-loader-config
ojj1123 Apr 9, 2024
5f8b8bf
Merge branch 'canary' into fix/custom-loader-config
ojj1123 Apr 9, 2024
9099e78
fix: add next-start test suite
ojj1123 Apr 10, 2024
82eeab4
skip test if build turbopack
ojj1123 Apr 10, 2024
2a2dcaf
Merge branch 'canary' into fix/custom-loader-config
ojj1123 Apr 10, 2024
1e1c694
Apply suggestions from code review
styfle Apr 10, 2024
cda86fc
Apply suggestions from code review
styfle Apr 10, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/next/src/shared/lib/get-img-props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,11 @@ export function getImgProps(
config = { ...c, allSizes, deviceSizes }
}

if (typeof defaultLoader === 'undefined') {
throw new Error(
'images.loaderFile detected but the file is missing default export.\nRead more: https://nextjs.org/docs/messages/invalid-images-config'
)
}
let loader: ImageLoaderWithConfig = rest.loader || defaultLoader

// Remove property so it's not spread on <img> element
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { getImageProps } from 'next/image'

export default function Page() {
const { props: imageProps } = getImageProps({
id: 'logo',
alt: 'logo',
src: '/logo.png',
width: '400',
height: '400',
})

return (
<div>
<img {...imageProps} />
</div>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default function Root({ children }: { children: React.ReactNode }) {
return (
<html>
<body>{children}</body>
</html>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import Image from 'next/image'

export default function Page() {
return (
<p>
<Image id="logo" alt="logo" src="/logo.png" width="400" height="400" />
</p>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export function dummyLoader({ src, width, quality }) {
return `/_next/image/?url=${src}&w=${width}&q=${quality || 50}`
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { nextTestSetup } from 'e2e-utils'
import { getRedboxHeader, hasRedbox } from 'next-test-utils'

const errorMessage =
'images.loaderFile detected but the file is missing default export.\nRead more: https://nextjs.org/docs/messages/invalid-images-config'

async function testDev(browser, errorRegex) {
expect(await hasRedbox(browser)).toBe(true)
expect(await getRedboxHeader(browser)).toMatch(errorRegex)
}

describe('Error test if the loader file export a named function', () => {
describe('in Development', () => {
const { next, isNextDev } = nextTestSetup({
skipDeployment: true,
files: __dirname,
})

;(isNextDev ? describe : describe.skip)('development only', () => {
it('should show the error when using `Image` component', async () => {
const browser = await next.browser('/')
await testDev(browser, errorMessage)
})

it('should show the error when using `getImageProps` method', async () => {
const browser = await next.browser('/get-img-props')
await testDev(browser, errorMessage)
})
})
})

describe('in Build and Start', () => {
const { next, isNextStart } = nextTestSetup({
skipDeployment: true,
skipStart: true,
files: __dirname,
})

// next build doesn't support turbopack yet
// see https://nextjs.org/docs/architecture/turbopack#unsupported-features
;(isNextStart && !process.env.TURBOPACK ? describe : describe.skip)(
'build and start only',
() => {
it('should show the build error', async () => {
await expect(next.start()).rejects.toThrow(
'next build failed with code/signal 1'
)
expect(next.cliOutput).toContain(errorMessage)
})
}
)
})
})
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
images: {
loaderFile: '/dummy-loader.ts',
},
}

module.exports = nextConfig
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.