Fix next/dynamic with babel and src dir (#65177)

### What * Fix `next/dynamic` with babel config and `src/` directory * Separate the existing `next/dynamic` dev tests, make it easier to cover more cases, add `.babelrc` + `src/` folder coverage case ### Why * The new transform is using `src/` or root dir as the base directory `next/dynamic` for generating relative module path as unique key for `next/dynamic` modules. The babel one was always using the root dir (`cwd`), which is incorrect. It should use the `src/` dir. In the future we could make the different solution to generate the unique id simpler, instead of using relative paths Closes NEXT-3254 Closes NEXT-3251 Fixes #64741
vercel · Apr 29, 2024 · eb89e39 · eb89e39
1 parent 1df2f3e
commit eb89e39
Show file tree

Hide file tree

Showing 10 changed files with 336 additions and 367 deletions.
diff --git a/packages/next/src/build/babel/loader/get-config.ts b/packages/next/src/build/babel/loader/get-config.ts
@@ -260,7 +260,7 @@ function getFreshConfig(
   filename: string,
   inputSourceMap?: object | null
 ) {
-  let { isServer, pagesDir, development, hasJsxRuntime, configFile, cwd } =
+  let { isServer, pagesDir, development, hasJsxRuntime, configFile, srcDir } =
     loaderOptions
 
   let customConfig: any = configFile
@@ -329,7 +329,7 @@ function getFreshConfig(
       supportsTopLevelAwait: true,
 
       isServer,
-      cwd,
+      srcDir,
       pagesDir,
       isDev: development,
       hasJsxRuntime,

diff --git a/packages/next/src/build/babel/loader/types.d.ts b/packages/next/src/build/babel/loader/types.d.ts
@@ -17,4 +17,5 @@ export interface NextBabelLoaderOptions {
   caller: any
   configFile: string | undefined
   cwd: string
+  srcDir: string
 }
diff --git a/packages/next/src/build/babel/plugins/react-loadable-plugin.ts b/packages/next/src/build/babel/plugins/react-loadable-plugin.ts
@@ -168,9 +168,9 @@ export default function ({
                 t.binaryExpression(
                   '+',
                   t.stringLiteral(
-                    (state.file.opts.caller?.cwd
+                    (state.file.opts.caller?.srcDir
                       ? relativePath(
-                          state.file.opts.caller.cwd,
+                          state.file.opts.caller.srcDir,
                           state.file.opts.filename
                         )
                       : state.file.opts.filename) + ' -> '

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -414,6 +414,7 @@ export default async function getBaseWebpackConfig(
         isServer: isNodeOrEdgeCompilation,
         distDir,
         pagesDir,
+        srcDir: path.dirname((appDir || pagesDir)!),
         cwd: dir,
         development: dev,
         hasReactRefresh: dev && isClient,