ant-design-icons icon indicating copy to clipboard operation
ant-design-icons copied to clipboard

Missing support for type: "module" on Node?

Open luzat opened this issue 10 months ago • 17 comments

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.

luzat avatar Oct 23 '23 11:10 luzat