chore: update pagesDirs option in new changes

Author: Emod Kovacs

packages/next/build/babel/plugins/react-loadable-plugin.ts

@@ -152,7 +152,7 @@ export default function ({
                   '+',
                   t.stringLiteral(
                     relativePath(
-                      state.file.opts.caller.pagesDir,
+                      state.file.opts.caller.pagesDirs[0],
                       state.file.opts.filename
                     ) + ' -> '
                   ),

packages/next/build/webpack-config.ts

@@ -1132,7 +1132,7 @@ export default async function getBaseWebpackConfig(
       !isServer &&
         new ReactLoadablePlugin({
           filename: REACT_LOADABLE_MANIFEST,
-          pagesDir,
+          pagesDirs,
         }),
       !isServer && new DropClientPage(),
       // Moment.js is an extremely popular library that bundles large locale files

packages/next/build/webpack/plugins/react-loadable-plugin.ts

@@ -73,7 +73,7 @@ function getChunkGroupFromBlock(
 function buildManifest(
   _compiler: webpack.Compiler,
   compilation: webpack.compilation.Compilation,
-  pagesDir: string
+  pagesDirs: string[]
 ) {
   let manifest: { [k: string]: { id: string | number; files: string[] } } = {}
 
@@ -105,7 +105,7 @@ function buildManifest(
         // We construct a "unique" key from origin module and request
         // It's not perfect unique, but that will be fine for us.
         // We also need to construct the same in the babel plugin.
-        const key = `${path.relative(pagesDir, originRequest)} -> ${
+        const key = `${path.relative(pagesDirs[0], originRequest)} -> ${
           dependency.request
         }`
 
@@ -164,15 +164,15 @@ function buildManifest(
 
 export class ReactLoadablePlugin {
   private filename: string
-  private pagesDir: string
+  private pagesDirs: string[]
 
-  constructor(opts: { filename: string; pagesDir: string }) {
+  constructor(opts: { filename: string; pagesDirs: string[] }) {
     this.filename = opts.filename
-    this.pagesDir = opts.pagesDir
+    this.pagesDirs = opts.pagesDirs
   }
 
   createAssets(compiler: any, compilation: any, assets: any) {
-    const manifest = buildManifest(compiler, compilation, this.pagesDir)
+    const manifest = buildManifest(compiler, compilation, this.pagesDirs)
     // @ts-ignore: TODO: remove when webpack 5 is stable
     assets[this.filename] = new sources.RawSource(
       JSON.stringify(manifest, null, 2)

packages/next/server/hot-reloader.ts

@@ -311,7 +311,7 @@ export default class HotReloader {
       isServer: false,
       config: this.config,
       buildId: this.buildId,
-      pagesDir: this.pagesDir,
+      pagesDirs: this.pagesDirs,
       rewrites: {
         beforeFiles: [],
         afterFiles: [],