Missing support for type: "module" on Node?

[luzat]

I am trying to import icons from within a Node package with type: "module" specified in package.json:

import { BookOutlined } from '@ant-design/icons'

Unfortunately, this leads to the following error:

import { BookOutlined } from "@ant-design/icons";
         ^^^^^^^^^^^^
SyntaxError: Named export 'BookOutlined' not found. The requested module '@ant-design/icons' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@ant-design/icons';
const { BookOutlined } = pkg;

Even import { BookOutlined } from '@ant-design/icons/es/index.js' does not work, because the package is interpreted as containing CommonJS modules.

The proposed solution is clumsy and also seems to break tree-shaking. My current workaround for each icon that I use is:

import BookOutlinedPackage from '@ant-design/icons/BookOutlined.js'
const BookOutlined = BookOutlinedPackage.default
export { BookOutlined }

This is obviously not a good solution. @ant-design/icons should probably be built using type: "module", specify an exports field in package.json and use imports with file extensions in the build.

[hannesj]

This seems to be a regression from 5.1.4 to 5.2.0

[luzat]

@hannesj You are right, downgrading to 5.1.4 from 5.2.6 makes it work.

The issue seems to be that the CJS code (lib/index.js) generated by swc cannot be correctly interpreted to be imported into ESM code. There may be two ways to fix that:

1. Fix the code generated by swc
2. Have Node modules import ESM instead of CJS

Regarding option 2.:

Node is currently always going to import the CJS lib/index.js, because it does not know the package.json's module field. This could be changed by adding something similar to this to package.json:

{
  "exports": {
    "import": "./es/index.js",
    "require": "./lib/index.cjs"
  },
  "type": "module"
}

Maybe this also works without "type": "module" and switching extensions to .mjs/.c?js. Additionally, for imports to work, the generated code would have to use file extensions everywhere and those should probably be .mjs/.js and .cjs (if the type is being specified as module). I feel that this would be the way forward (until CJS can be dropped), but might require additional changes.

[luzat]

To make it work with 5.2.6 and Remix 2+ I also found a possible workaround to be adding dependencies to remix.config.js:

serverDependenciesToBundle: [
    '@ant-design/icons',
    ^@ant-design\/icons-svg.*/,
    /^rc-util.*/,
  ],

This basically just compiles the packages into the resulting build/index.js and avoids having Node trying to resolve the packages.

[manzaloros]

To make it work with 5.2.6 and Remix 2+ I also found a possible workaround to be adding dependencies to remix.config.js:

And this is now a problem with Remix 2.3.0 because the vite Remix config doesn't accept the value serverDependenciesToBundle so we're stuck using '@ant-design/icons', at 5.1.4. 😞

[luzat]

To make it work with 5.2.6 and Remix 2+ I also found a possible workaround to be adding dependencies to remix.config.js:

And this is now a problem with Remix 2.3.0 because the vite Remix config doesn't accept the value serverDependenciesToBundle so we're stuck using '@ant-design/icons', at 5.1.4. 😞

I can't switch to vite yet because of other bugs, but would ssr.noExternal (Remix docs) instead of serverDependenciesToBundle solve that problem?

[Airkro]

@afc163 @zombieJ

此问题从 5.2.x 开始出现，代码的导出方式发生了变化，es 文件夹下的代码也全部失去了拓展名，使其无法像过去 5.1 通过 esm 模式引入，是一次严重的破坏性更新。

这使得原先不需要编译，通过 nodejs 18+ 直接运行的代码（一般用在单元测试中）在新版无法执行。

只能暂时锁定在 5.1版本规避，受此影响项目的 antd 也不得不停留在 5.8.0。

由于涉及到打包逻辑，普通人的PR估计你们也不会接受，请求官方跟进这个问题。

相关问题：#307

---

This problem started in 5.2.x, the code exports changed, and the code under the es folder lost all extension names, making it impossible to introduce it through the ESM mode like in 5.1. It was a serious destructive update.

This makes code that was previously run directly with Nodejs 18+ without compilation (typically used in unit tests), became imexecutable in the new version.

It can only be temporarily locked in version 5.1 to avoid it, and the antd of the affected project has to stay at 5.8.0.

As it involves bundle logic, I don't think you'll accept PR for ordinary people, please official follow-up on this issue.

Related issues：#307

[Airkro]

[afc163]

As it involves bundle logic, I don't think you'll accept PR for ordinary people, please official follow-up on this issue.

PR is welcome~

[Airkro]

@afc163

After I tried hard to bypass the lerna nightmare (huge repo), I found out there is no way to bundle ESM files unless you don't use father as the build tool ...

[hungtcs]

After trying I'm sure I can't fix this by myself.
I tried to repackage icons-react but failed because the dependencies are so complex that it's almost impossible to package it as an esmodule. Some of the dependencies on rc-util even depend directly on the commonjs code under rc-util/lib instead of being automatically recognized based on package exports.

Hopefully the official fix will come soon. 🙏

[TestInShangHai]

npm install @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save
Download Dependency Timeout
[#####.............] / idealTree:ws: sill placeDep ROOT utf-8-validate@6.0.3 OK for: @metamask/sdk-communication-layer@0.18.5 want: ^6.0.3
It gets stuck at this point.

[bombillazo]

We get this issue when we upgrade our Refine package (using Next.js) and it tries to use the latest and icons version. On older versions it locked the icons version to 5.0.1, which is under the breaking version of >5.1.4. 😞

[Gleb2093]

npm install @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save Download Dependency Timeout [#####.............] / idealTree:ws: sill placeDep ROOT utf-8-validate@6.0.3 OK for: @metamask/sdk-communication-layer@0.18.5 want: ^6.0.3 It gets stuck at this point.

Hi. Are you fixed it ?

[eliobricenov]

npm install @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save Download Dependency Timeout [#####.............] / idealTree:ws: sill placeDep ROOT utf-8-validate@6.0.3 OK for: @metamask/sdk-communication-layer@0.18.5 want: ^6.0.3 It gets stuck at this point.

Experiencing the same, any fix?

[BaileyMillerSSI]

As it involves bundle logic, I don't think you'll accept PR for ordinary people, please official follow-up on this issue.

PR is welcome~
@afc163
Any updates on this? The latest versions of @ant-design/icons still has this issue for a fresh NextJs project.