Hydration mismatch caused by next/dynamic when src folder and babel are used

[LukasBombach]

Link to the code that reproduces this issue

https://github.com/LukasBombach/next-dynamic-src-folder-babel-bug

To Reproduce

1. yarn install
2. yarn dev
3. open http://localhost:3000
4. you will get a hydration mismatch caused by a component rendered via next/hydration

Current vs. Expected behavior

In the example, I use next/dynamic to load and render a plain react component that always returns the same JSX

src/pages/index.tsx

import dynamic from "next/dynamic";

const DynamicTest = dynamic(() => import("../components/DynamicTest").then((mod) => mod.DynamicTest), {
  loading: () => <div>Loading</div>,
});

export default function Page() {
  return <DynamicTest />;
}

src/components/DynamicTest.tsx

export const DynamicTest = () => {
  return <div>Dynamic Content</div>;
};

I would expect no errors here, but this will result in a hydration mismatch:

Text content did not match. Server: "Dynamic Content" Client: "Loading"

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:41 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.19
  pnpm: 8.9.0
Relevant Packages:
  next: 14.2.2 // Latest available version is detected (14.2.2).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Lazy Loading

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local), Other (Deployed)

Additional context

The hydration mismatch only occurs under these conditions

• babel is used
• a src folder is used

When you either remove the .babelrc from the example or move the pages and components from the src folder to the root dir, everything works alright

The bug was introduced with next 14.2.0

We did reproduce it with 14.2.0, 14.2.1 and 14.2.2.

Next 14.1.3 works fine

_NEXT-3251

[adanperez]

We are also running into this issue.

[Aedric]

Also seeing this.

I think this is the change that introduced the issue:142050d#diff-3cac9d9bfe73e0619e6407f21f6fe652da0719d0ec9074ff813ad3e416d0eb1aR945

It makes sense that this would only hit us in the /src/ directory

[LukasBombach]

Thank you!

[huozhi]

It's fixed in v14.3.0-canary.31

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.