Build fails with async webpack config in next.config.js

kirill-konshin commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000
Binaries:
  Node: 16.18.1
  npm: 8.19.2
  Yarn: 3.2.1
  pnpm: N/A
Relevant packages:
  next: 13.0.7
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://codesandbox.io/s/next-webpack-async-iy1bn4?file=/next.config.js

To Reproduce

Run next build

Describe the Bug

Build fails with

> Build error occurred
TypeError: webpackConfig.entry is not a function
    at Object.getBaseWebpackConfig [as default] (/sandbox/node_modules/next/dist/build/webpack-config.js:1520:51)
    at async Promise.all (index 0)
    at async Span.traceAsyncFn (/sandbox/node_modules/next/dist/trace/trace.js:79:20)
    at async /sandbox/node_modules/next/dist/build/index.js:388:33
    at async /sandbox/node_modules/next/dist/build/index.js:372:13
    at async Span.traceAsyncFn (/sandbox/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/sandbox/node_modules/next/dist/build/index.js:62:29)

Also I managed to get another error locally (not in sandbox):

> Build error occurred
TypeError: Cannot read properties of undefined (reading 'import')
    at /xxx/node_modules/next/dist/build/index.js:527:102
    at Map.forEach (<anonymous>)
    at /xxx/node_modules/next/dist/build/index.js:518:72
    at async Span.traceAsyncFn (/xxx/node_modules/next/dist/trace/trace.js:79:20)
    at async /xxx/node_modules/next/dist/build/index.js:503:17
    at async /xxx/node_modules/next/dist/build/index.js:464:13
    at async Span.traceAsyncFn (/xxx/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/xxx/node_modules/next/dist/build/index.js:66:29)

I've patched the next/dist/build/index.js like so:

// patch begins
if (!clientEntry[_constants1.CLIENT_STATIC_FILES_RUNTIME_MAIN_APP]) {
  console.log({clientEntry}, _constants1.CLIENT_STATIC_FILES_RUNTIME_MAIN_APP);
}
// patch ends
clientEntry[_constants1.CLIENT_STATIC_FILES_RUNTIME_MAIN_APP] = [
  // TODO-APP: cast clientEntry[CLIENT_STATIC_FILES_RUNTIME_MAIN_APP] to type EntryDescription once it's available from webpack
  // @ts-expect-error clientEntry['main-app'] is type EntryDescription { import: ... }
  ...clientEntry[_constants1.CLIENT_STATIC_FILES_RUNTIME_MAIN_APP].import, // <---- error here
  value, 
];

And here's the outcome:

> Promise returned in next config. https://nextjs.org/docs/messages/promise-in-next-config
{
  clientEntry: [AsyncFunction: entry] {
    'app/head': {
      dependOn: [Array],
      import: 'next-flight-client-entry-loader?server=false!'
    },
    'app/layout': {
      dependOn: [Array],
      import: 'next-flight-client-entry-loader?modules=%2Fxxx%2Fsrc%2Fapp%2Flayout.module.scss&modules=%2Fxxx%2Fsrc%2Fapp%2Flayout.scss&modules=%2Fxxx%2Fsrc%2Fapp%2Flayout-pace.scss&modules=%2Fxxx%2Fnode_modules%2Fhighlight.js%2Fstyles%2Fgithub.css&modules=%2Fxxx%2Fnode_modules%2Freact-placeholder%2Flib%2FreactPlaceholder.css&modules=%2Fxxx%2Fnode_modules%2F%40next%2Ffont%2Fgoogle%2Ftarget.css%3F%7B%22path%22%3A%22src%2Fapp%2Flayout.tsx%22%2C%22import%22%3A%22Source_Sans_Pro%22%2C%22arguments%22%3A%5B%7B%22weight%22%3A%5B%22300%22%2C%22400%22%2C%22700%22%5D%2C%22subsets%22%3A%5B%22cyrillic%22%2C%22latin%22%5D%7D%5D%2C%22variableName%22%3A%22sourceSansPro%22%7D&modules=%2Fxxx%2Fsrc%2Fcomponents%2Fmenu.tsx&modules=%2Fxxx%2Fsrc%2Fcomponents%2FlayoutSwitcher.tsx&modules=%2Fxxx%2Fsrc%2Fcomponents%2Ffooter.tsx&server=false!'
    },
    'app/loading': {
      dependOn: [Array],
      import: 'next-flight-client-entry-loader?server=false!'
    },
    'app/contacts/page': {
      dependOn: [Array],
      import: 'next-flight-client-entry-loader?server=false!'
    },
    'app/contacts/head': {
      dependOn: [Array],
      import: 'next-flight-client-entry-loader?server=false!'
    },
    'app/contacts/loading': {
      dependOn: [Array],
      import: 'next-flight-client-entry-loader?server=false!'
    }
  }
} main-app

> Build error occurred
TypeError: Cannot read properties of undefined (reading 'import')
    at /xxx/node_modules/next/dist/build/index.js:527:102

As you see, clientEntry does not have main-app.

The workaround is not to use async webpack config.

Expected Behavior

Should work with async webpack config.

Which browser are you using? (if relevant)

Chrome, irrelevant

How are you deploying your application? (if relevant)

next build && next start

agrohs commented 1 year ago

Any update on here??

shindi-renuo commented 1 month ago

Same issue.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

vercel / next.js