Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing support for type: "module" on Node? #605

Closed
luzat opened this issue Oct 23, 2023 · 21 comments · Fixed by #653
Closed

Missing support for type: "module" on Node? #605

luzat opened this issue Oct 23, 2023 · 21 comments · Fixed by #653

Comments

@luzat
Copy link

luzat commented Oct 23, 2023

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
Copy link

hannesj commented Oct 26, 2023

This seems to be a regression from 5.1.4 to 5.2.0

@luzat
Copy link
Author

luzat commented Oct 26, 2023

@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
Copy link
Author

luzat commented Oct 26, 2023

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
Copy link

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
Copy link
Author

luzat commented Nov 17, 2023

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
Copy link

Airkro commented Nov 28, 2023

@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
Copy link

Airkro commented Nov 28, 2023

image

@afc163
Copy link
Member

afc163 commented Nov 28, 2023

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
Copy link

Airkro commented Dec 13, 2023

@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
Copy link

hungtcs commented Apr 1, 2024

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
Copy link

TestInShangHai commented May 8, 2024

npm install @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save
Download Dependency Timeout
[#####.............] / idealTree:ws: sill placeDep ROOT [email protected] OK for: @metamask/[email protected] want: ^6.0.3
It gets stuck at this point.
image

@bombillazo
Copy link

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
Copy link

Gleb2093 commented May 9, 2024

npm install @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save Download Dependency Timeout [#####.............] / idealTree:ws: sill placeDep ROOT [email protected] OK for: @metamask/[email protected] want: ^6.0.3 It gets stuck at this point. image

Hi. Are you fixed it ?

@eliobricenov
Copy link

npm install @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save Download Dependency Timeout [#####.............] / idealTree:ws: sill placeDep ROOT [email protected] OK for: @metamask/[email protected] want: ^6.0.3 It gets stuck at this point. image

Experiencing the same, any fix?

@BaileyMillerSSI
Copy link

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.

@KrishnaPG
Copy link

Encountered same problem with remix + vite. Wondering how to workaround it.

@Piazzi
Copy link

Piazzi commented Jun 17, 2024

Rolling back to "@ant-design/icons": "5.1.4" worked for me, waiting for an official fix.

@wctiger
Copy link

wctiger commented Jul 18, 2024

Rolling back to "@ant-design/icons": "5.1.4" worked for me, waiting for an official fix.

Note a possible side effect of rolling this back is another issue as mentioned in ant-design/ant-design#47886 which can be mitigated by forcing an older version of react types ant-design/ant-design#47886 (comment)

@afc163
Copy link
Member

afc163 commented Jul 20, 2024

Introduced in #583 cc @Dunqing

@afc163
Copy link
Member

afc163 commented Jul 21, 2024

Fixed in @ant-design/[email protected].

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.