@ant-design/icons

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;
原因：此问题从 5.2.x 开始出现，代码的导出方式发生了变化，es 文件夹下的代码也全部失去了拓展名，

  • 使其无法像过去 5.1 通过 esm 模式引入，是一次严重的破坏性更新
  • 使得原先不需要编译，通过 nodejs 18+ 直接运行的代码（一般用在单元测试中）在新版无法执行

解决：暂时锁定在 5.1.x 版本避免这个问题，不要安装 5.2.6 最新版
https://github.com/ant-design/ant-design-icons/issues/605

  1. # 把最新的 5.2.6 版本降级到 5.1.4
  2. "@ant-design/icons": "^5.1.4",

https://www.npmjs.com/package/@ant-design/icons?activeTab=versions
�image.png

第二种解决方案：不要服务端渲染，在客户端渲染，一次性导出 icons

  1. import * as antdIcons from '@ant-design/icons';
  2. const { FormOutlined } = antdIcons

type: mobule

which may not support all module.exports as named exports

import { BitcoinCircleColorful, EthereumFilled } from ‘@ant-design/web3-icons’;
SyntaxError: Named export ‘BitcoinCircleColorful’ not found. The requested module ‘@ant-design/web3-icons’ is a CommonJS module, which may not support all module.exports as named exports.
原因

  1. CommonJS 和 ES Module 不能共存
  2. CJS 使用的是 require() 和 module.exports；ESM 用的是是 import 和 exports
  3. CJS 模块不能使用 import 语法
  4. 为了加载ES模块，需要在package.json中设置 “type”: “module” 或者使用.mjs扩展

Remix不支持服务器上的ESM；使用 serverDependenciesToBundle 让Remix将这些转换为CJS
解决：remix.config.js 配置 serverDependenciesToBundle: [‘@ant-design/web3-icons’]
https://remix.run/docs/en/main/guides/gotchas#importing-esm-packages
为啥 antd不报错，因为 antd 支持服务端渲染；@ant-design/web3-icons 不支持服务端渲染