04c87ae2d7
<!-- Thanks for opening a PR! Your contribution is much appreciated. To make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change(s) that you're making: ## For Contributors ### Fixing a bug - Related issues linked using `fixes #number` - Tests added. See: https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs - Errors have a helpful link attached, see https://github.com/vercel/next.js/blob/canary/contributing.md --> fixes #63803 ## What I do? - If the loader file export the function as `named`, Next.js throws the error. - But this error is a bit confusing for the developers. - So I open this PR for showing the accurate error message. ## AS-IS / TO-BE ### AS-IS ``` TypeError: Cannot use 'in' operator to search for '__next_img_default' in undefined ``` <img width="1202" alt="스크린샷 2024-03-28 16 10 53" src="https://github.com/vercel/next.js/assets/33178048/e7c81cb5-7976-46ff-b86f-9c8fd9a7a681"> ### TO-BE ``` Error: The loader file must export a default function that returns a string. See more info here: https://nextjs.org/docs/messages/invalid-images-config ``` <img width="500" alt="스크린샷 2024-03-28 16 10 53" src="https://github.com/vercel/next.js/assets/33178048/c391e61b-6a44-4f85-8600-28ab6cb5b0eb"> --------- Co-authored-by: Steven <steven@ceriously.com>
53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
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)
|
|
})
|
|
}
|
|
)
|
|
})
|
|
})
|