fix(wren-ui): Issues Encountered with Antd after Upgrading NextJS from 13 to 14

[andreashimin]

Description

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.

Resolve the CJS version of Antd in next.config.js

const resolveAlias = {
  antd$: path.resolve(__dirname, './node_modules/antd/lib'),
  '@ant-design/icons$': path.resolve(
    __dirname,
    './node_modules/@ant-design/icons/lib',
  ),
};

const nextConfig = {
  ...,
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      ...resolveAlias,
    };
    return config;
  }
}

Additional Context

• Upgrade to Node 18
• 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

Test Result

[fredalai]

LGTM.

And... Do we need to specify node 18 in engines in the package.json file?

[onlyjackfrost]

LGTM, thanks for fixing this.
Maybe you can contribute back to the community