Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.9.0
      npm: 7.21.1
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 12.1.7-canary.3
      react: 18.1.0
      react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Any invalid DOM structure causes hydration problems. I presume this is a React bug, but I don't have the time to collect more evidence, other than I can trigger this in Next.js, if other SSR frameworks show the bug, then it must definitely be upstream to React itself.

One can argue that this is expected behaviour as well, but that invalid DOM nesting should throw while doing SSR, is not documented anywhere.

import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <p>
      <p>Hello</p>
    </p>
  );
};

export default Home;

Take the above for instance, or a table without proper tags, and in general any DOM validation problems that trigger a message like: Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>., or any that applies.

Both with next dev, and next build && next start this result in React errors, that claim mismatched DOM nodes.

It seems that the server side rendering expects and error boundary to catch this validation errors, but none happens on the client, so the claim is made. Note that both errors (invalid nesting and mismatched UI) are logged.

Expected Behavior

The error/warnings should still be logged, but the HTML should be produced, although it is invalid.

Or, alternatively, this behaviour should be document somewhere.

To Reproduce

1. yarn create next-app test-app --typescript
2. Fill pages/index.tsx with:

import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <p>
      <p>Hello</p>
    </p>
  );
};

export default Home;

3. yarn dev (or npm run dev)
4. Open in browser, an Error overlay pops, and the console is full with errors/warnings.