NextJS Webpack Version 5 Build Error

[someyoungideas]

I am currently using NextJS with this webpack plugin within the next.config.js. When I attempt to update to use webpack version 5 with NextJS I get the following build error.

(node:74857) UnhandledPromiseRejectionWarning: Error: Entry pages/_app depends on /Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/antd-dayjs-webpack-plugin/src/init-dayjs-webpack-plugin-entry.js, but this entry was not found
    at Compilation.seal (/Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/webpack/bundle5.js:43077:13)
    at /Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/webpack/bundle5.js:46364:20
    at /Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/webpack/bundle5.js:42957:4
    at _next2 (eval at create (/Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:25:1)
    at eval (eval at create (/Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/webpack/bundle5.js:31934:10), <anonymous>:52:1)
    at /Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/webpack/bundle5.js:57714:11
    at /Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/neo-async/async.js:1:9438
    at Object.each (/Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/neo-async/async.js:1:9616)
    at /Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/webpack/bundle5.js:57693:18
    at /Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/neo-async/async.js:1:9438
    at done (/Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/neo-async/async.js:1:9750)
    at /Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/neo-async/async.js:1:9380
    at /Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/webpack/bundle5.js:57427:11
    at /Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/webpack/bundle5.js:36192:6
    at /Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/webpack/bundle5.js:36146:11
    at /Users/redacted/Projects/nextjs-antddayjs-webpack5/node_modules/next/dist/compiled/webpack/bundle5.js:76358:9
(Use `node --trace-warnings ...` to show where the warning was created)
(node:74857) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:74857) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[icflorescu]

I just bumped into the same error.

[oceandrama]

@iamkun Could you see?

[AkramiPro]

i have same issue in nextjs webpack 5

[FreyrThorv]

👍 Same issue here. Are there any plans to update this plugin to support Webpack 5?

For now it's easy to continue using Webpack 4 but the next major version of NextJS will force users onto Webpack 5. This means users will need to chose between removing this (amazing!) plugin or live with being stuck on version 10 of NextJS.

[oceandrama]

@someyoungideas @icflorescu @AkramiPro @FreyrThorv
Next.js v 11 is able to exclude moment locales, so in my project I just delete this plugin and my bundle size is not increased

[duyhung85]

Any update on this issue please? I dont want to use moment as it is deprecated.

[tientran0019]

You can use this solution:

https://github.com/vercel/next.js/blob/HEAD/examples/with-ant-design/components/DatePicker.js

[TheCaffinatedDeveloper]

You can use this solution:

https://github.com/vercel/next.js/blob/HEAD/examples/with-ant-design/components/DatePicker.js

I can confirm that this works. Too bad I spent the time setting up the plugin only to find it not working 😩

Thanks @tientran0019 🙏

[jzzfs]

If you're using typescript, you can go w/ this (source):

import { Dayjs } from 'dayjs';
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import generatePicker from 'antd/lib/date-picker/generatePicker';
import 'antd/lib/date-picker/style/index';

const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);

export default DatePicker;

---

Caveat -- if you take the code from antd's own Replace Moment.js section, they're already using ES module imports:

import generatePicker from 'antd/es/date-picker/generatePicker'; vs.
import generatePicker from 'antd/lib/date-picker/generatePicker';

import 'antd/es/date-picker/style/index'; vs.
import 'antd/lib/date-picker/style/index';

For some reason, these modules aren't transpilable -- not even w/ next-transpile-modules.

So, import from lib instead -- just like in the top example.

[egisz]

You can use this solution:

https://github.com/vercel/next.js/blob/HEAD/examples/with-ant-design/components/DatePicker.js

This solution does not support localisation...