After upgrading NextJS to version 14, the following issue occurs with Antd:
⨯ /Users/shimin/Projects/canner/WrenAI/wren-ui/node_modules/rc-util/es/omit.js:1
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1274:20)
at Module._compile (node:internal/modules/cjs/loader:1320:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
at Module.load (node:internal/modules/cjs/loader:1197:32)
at Module._load (node:internal/modules/cjs/loader:1013:12)
at Module.require (node:internal/modules/cjs/loader:1225:19)
at mod.require (/Users/shimin/Projects/canner/WrenAI/wren-ui/node_modules/next/dist/server/require-hook.js:65:28)
at require (node:internal/modules/helpers:177:18)
at rc-util/es/omit (/Users/shimin/Projects/canner/WrenAI/wren-ui/.next/server/pages/_app.js:330:18)
at __webpack_require__ (/Users/shimin/Projects/canner/WrenAI/wren-ui/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./node_modules/antd/es/spin/index.js:15:73)
at ./node_modules/antd/es/spin/index.js (/Users/shimin/Projects/canner/WrenAI/wren-ui/.next/server/vendor-chunks/antd.js:1270:1)
at __webpack_require__ (/Users/shimin/Projects/canner/WrenAI/wren-ui/.next/server/webpack-runtime.js:33:42)
at __barrel_optimize__?names=Spin!=!./node_modules/antd/es/index.js (/Users/shimin/Projects/canner/WrenAI/wren-ui/.next/server/pages/_app.js:36:63)
The error message indicates that NextJS is importing the ESM version of Antd, which is not compatible with CJS. To resolve this, configure a resolve alias to point to the CJS version of Antd manually.
Updates the package from next-plugin-antd-less to next-with-less, eliminating the warning messages.
⚠ Invalid next.config.js options detected:
⚠ Unrecognized key(s) in object: 'lessVarsFilePath', 'lessVarsFilePathAppendToEndOfContent'
⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
Description
After upgrading NextJS to version 14, the following issue occurs with Antd:
The error message indicates that NextJS is importing the ESM version of Antd, which is not compatible with CJS. To resolve this, configure a resolve alias to point to the CJS version of Antd manually.
Resolve the CJS version of Antd in next.config.js
Additional Context
next-plugin-antd-less
tonext-with-less
, eliminating the warning messages.Test Result