diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx index cacd2b498f371..665b809a6817a 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/error-overlay/error-overlay.tsx @@ -43,14 +43,16 @@ export function ErrorOverlay({ if (!!state.rootLayoutMissingTags?.length) { return ( ) } if (state.buildError !== null) { - return + return } // No Runtime Errors. @@ -64,12 +66,12 @@ export function ErrorOverlay({ return ( { setIsErrorOverlayOpen(false) }} - {...commonProps} /> ) } diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/use-error-hook.ts b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/use-error-hook.ts index 7b05b69064a50..bf1178dbae754 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/use-error-hook.ts +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/runtime-error/use-error-hook.ts @@ -30,8 +30,7 @@ function getErrorSignature(ev: SupportedErrorEvent): string { break } - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const _ = event satisfies never + event satisfies never return '' } @@ -109,7 +108,7 @@ export function useErrorHook({ // missing tags won't be dismissed until resolved, the // total number of errors may be fixed to their length. totalErrorCount: rootLayoutMissingTags?.length - ? rootLayoutMissingTags.length + ? 1 : !!buildError ? 1 : readyErrors.length, diff --git a/test/development/app-dir/missing-required-html-tags-new-overlay/app/layout.js b/test/development/app-dir/missing-required-html-tags-new-overlay/app/layout.js new file mode 100644 index 0000000000000..75299d7fe8c5d --- /dev/null +++ b/test/development/app-dir/missing-required-html-tags-new-overlay/app/layout.js @@ -0,0 +1,3 @@ +export default function Layout({ children }) { + return {children} +} diff --git a/test/development/app-dir/missing-required-html-tags-new-overlay/app/page.js b/test/development/app-dir/missing-required-html-tags-new-overlay/app/page.js new file mode 100644 index 0000000000000..ff7159d9149fe --- /dev/null +++ b/test/development/app-dir/missing-required-html-tags-new-overlay/app/page.js @@ -0,0 +1,3 @@ +export default function Page() { + return

hello world

+} diff --git a/test/development/app-dir/missing-required-html-tags-new-overlay/missing-html-tags-new-overlay.test.ts b/test/development/app-dir/missing-required-html-tags-new-overlay/missing-html-tags-new-overlay.test.ts new file mode 100644 index 0000000000000..bacf75d8ba78a --- /dev/null +++ b/test/development/app-dir/missing-required-html-tags-new-overlay/missing-html-tags-new-overlay.test.ts @@ -0,0 +1,47 @@ +import { nextTestSetup } from 'e2e-utils' +import { + assertHasRedbox, + assertNoRedbox, + getRedboxDescription, + getToastErrorCount, + hasErrorToast, + retry, +} from 'next-test-utils' +import { outdent } from 'outdent' + +// TODO: merge with test/development/app-dir/missing-required-html-tags/index.test.ts +// once new overlay is stable +describe('app-dir - missing required html tags', () => { + const { next } = nextTestSetup({ + files: __dirname, + }) + + it('should display correct error count in dev indicator', async () => { + const browser = await next.browser('/') + + retry(async () => { + expect(await hasErrorToast(browser)).toBe(true) + }) + // Dev indicator should show 1 error + expect(await getToastErrorCount(browser)).toBe(1) + + await assertHasRedbox(browser) + + await retry(async () => { + expect(await getRedboxDescription(browser)).toEqual(outdent` + The following tags are missing in the Root Layout: . + Read more at https://nextjs.org/docs/messages/missing-root-layout-tags + `) + }) + + await next.patchFile('app/layout.js', (code) => + code.replace( + 'return {children}', + 'return {children}' + ) + ) + + await assertNoRedbox(browser) + expect(await browser.elementByCss('p').text()).toBe('hello world') + }) +}) diff --git a/test/development/app-dir/missing-required-html-tags-new-overlay/next.config.js b/test/development/app-dir/missing-required-html-tags-new-overlay/next.config.js new file mode 100644 index 0000000000000..09632ad85342c --- /dev/null +++ b/test/development/app-dir/missing-required-html-tags-new-overlay/next.config.js @@ -0,0 +1,8 @@ +/** + * @type {import('next').NextConfig} + */ +module.exports = { + experimental: { + newDevOverlay: true, + }, +} diff --git a/test/development/app-dir/missing-required-html-tags/index.test.ts b/test/development/app-dir/missing-required-html-tags/index.test.ts index 98ad32b89311b..0776a5db38906 100644 --- a/test/development/app-dir/missing-required-html-tags/index.test.ts +++ b/test/development/app-dir/missing-required-html-tags/index.test.ts @@ -64,7 +64,7 @@ describe('app-dir - missing required html tags', () => { ) await openRedbox(browser) - // TODO(NDX-768): Should show "missing tags" error + expect(await getRedboxDescription(browser)).toMatchInlineSnapshot(` "In HTML,

cannot be a child of <#document>. This will cause a hydration error."