🐛[BUG] ESM 构建在 Rspack/Vite 等严格 ESM 环境下失败：`/es/index.js` 中缺少文件扩展名

[weihongyu12]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

在使用 Rspack（或 Vite、Webpack 5 + "type": "module"）等严格 ESM 兼容的构建工具时，项目构建失败。

@ant-design/pro-components/es/index.js 中的导出语句未包含 .js 扩展名，但在现代 ESM 规范下（尤其是当 package.json 含 "type": "module" 或使用 .mjs 时），所有导入路径必须是 完整指定（fully specified） 的，即应写为：

export * from "./card/index.js";
export * from "./layout/index.js";

📷 复现步骤

升级到 3.0.1-0 https://www.npmjs.com/package/@ant-design/pro-components/v/3.0.1-0 及以上版本必定重现

🏞 期望结果

@ant-design/pro-components 的 ESM 输出应兼容标准 ESM 环境，支持在 Rspack、Vite 等工具中开箱即用。

💻 复现代码

© 版本信息

• ProComponents 版本: [e.g. 3.1.3-1]
• umi 版本: [不使用umi]
• 浏览器环境: [所有环境]
• 开发环境 [e.g. Win 11 + Node.js 24 LTS + pnpm + RSPack 1.7.4]

🚑 其他信息

控制台输出

WARNING in ./src/layouts/Default/index.tsx 33:14-24
  ⚠ ESModulesLinkingWarning: export 'getMenuData' (imported as 'getMenuData') was not found in '@ant-design/pro-components' (module has no exports)
    ╭─[33:13]
 31 │     let t0;
 32 │     if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 33 │         t0 = getMenuData(menu, {
    ·              ───────────
 34 │             locale: false
 35 │         });
    ╰────


WARNING in ./src/layouts/Default/index.tsx 138:36-44
  ⚠ ESModulesLinkingWarning: export 'ProLayout' (imported as 'ProLayout') was not found in '@ant-design/pro-components' (module has no exports)
     ╭─[138:35]
 136 │     let t8;
 137 │     if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
 138 │         t8 = /*#__PURE__*/ _jsxDEV(ProLayout, {
     ·                                    ─────────
 139 │             title: "Ant Design Pro",
 140 │             logo: "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg",
     ╰────


WARNING in ./src/pages/Welcome/index.tsx 97:36-48
  ⚠ ESModulesLinkingWarning: export 'PageContainer' (imported as 'PageContainer') was not found in '@ant-design/pro-components' (module has no exports)
    ╭─[97:35]
 95 │     let t2;
 96 │     if ($[5] !== styles.welcomeDiv || $[6] !== t0 || $[7] !== t1) {
 97 │         t2 = /*#__PURE__*/ _jsxDEV(PageContainer, {
    ·                                    ─────────────
 98 │             children: /*#__PURE__*/ _jsxDEV(ProCard, {
 99 │                 children: /*#__PURE__*/ _jsxDEV("div", {
    ╰────


WARNING in ./src/pages/Welcome/index.tsx 98:45-51
  ⚠ ESModulesLinkingWarning: export 'ProCard' (imported as 'ProCard') was not found in '@ant-design/pro-components' (module has no exports)
     ╭─[98:44]
  96 │     if ($[5] !== styles.welcomeDiv || $[6] !== t0 || $[7] !== t1) {
  97 │         t2 = /*#__PURE__*/ _jsxDEV(PageContainer, {
  98 │             children: /*#__PURE__*/ _jsxDEV(ProCard, {
     ·                                             ───────
  99 │                 children: /*#__PURE__*/ _jsxDEV("div", {
 100 │                     className: styles.welcomeDiv,
     ╰────


ERROR in ./node_modules/.pnpm/@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd/node_modules/@ant-design/pro-components/es/index.js 1:1-23
  × Module not found: Can't resolve './card' in 'D:\project\antd-pro\node_modules\.pnpm\@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd\node_modules\@ant-design\pro-components\es'
   ╭─[1:0]
 1 │ export * from "./card";
   · ───────────────────────
 2 │ export * from "./descriptions";
 3 │ export * from "./field";
   ╰────
  help: Did you mean './card\index.js'?
        
        The request './card' failed to resolve only because it was resolved as fully specified,
        probably because the origin is strict EcmaScript Module,
        e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'.
        
        The extension in the request is mandatory for it to be fully specified.
        Add the extension to the request.


ERROR in ./node_modules/.pnpm/@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd/node_modules/@ant-design/pro-components/es/index.js 2:1-31
  × Module not found: Can't resolve './descriptions' in 'D:\project\antd-pro\node_modules\.pnpm\@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd\node_modules\@ant-design\pro-components\es'
   ╭─[2:0]
 1 │ export * from "./card";
 2 │ export * from "./descriptions";
   · ───────────────────────────────
 3 │ export * from "./field";
 4 │ export * from "./form";
   ╰────
  help: Did you mean './descriptions\index.js'?
        
        The request './descriptions' failed to resolve only because it was resolved as fully specified,
        probably because the origin is strict EcmaScript Module,
        e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'.
        
        The extension in the request is mandatory for it to be fully specified.
        Add the extension to the request.


ERROR in ./node_modules/.pnpm/@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd/node_modules/@ant-design/pro-components/es/index.js 3:1-24
  × Module not found: Can't resolve './field' in 'D:\project\antd-pro\node_modules\.pnpm\@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd\node_modules\@ant-design\pro-components\es'
   ╭─[3:0]
 1 │ export * from "./card";
 2 │ export * from "./descriptions";
 3 │ export * from "./field";
   · ────────────────────────
 4 │ export * from "./form";
 5 │ export * from "./layout";
   ╰────
  help: Did you mean './field\index.js'?
        
        The request './field' failed to resolve only because it was resolved as fully specified,
        probably because the origin is strict EcmaScript Module,
        e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'.
        
        The extension in the request is mandatory for it to be fully specified.
        Add the extension to the request.


ERROR in ./node_modules/.pnpm/@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd/node_modules/@ant-design/pro-components/es/index.js 4:1-23
  × Module not found: Can't resolve './form' in 'D:\project\antd-pro\node_modules\.pnpm\@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd\node_modules\@ant-design\pro-components\es'
   ╭─[4:0]
 2 │ export * from "./descriptions";
 3 │ export * from "./field";
 4 │ export * from "./form";
   · ───────────────────────
 5 │ export * from "./layout";
 6 │ export * from "./list";
   ╰────
  help: Did you mean './form\index.js'?
        
        The request './form' failed to resolve only because it was resolved as fully specified,
        probably because the origin is strict EcmaScript Module,
        e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'.
        
        The extension in the request is mandatory for it to be fully specified.
        Add the extension to the request.


ERROR in ./node_modules/.pnpm/@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd/node_modules/@ant-design/pro-components/es/index.js 5:1-25
  × Module not found: Can't resolve './layout' in 'D:\project\antd-pro\node_modules\.pnpm\@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd\node_modules\@ant-design\pro-components\es'
   ╭─[5:0]
 3 │ export * from "./field";
 4 │ export * from "./form";
 5 │ export * from "./layout";
   · ─────────────────────────
 6 │ export * from "./list";
 7 │ export * from "./provider";
   ╰────
  help: Did you mean './layout\index.js'?
        
        The request './layout' failed to resolve only because it was resolved as fully specified,
        probably because the origin is strict EcmaScript Module,
        e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'.
        
        The extension in the request is mandatory for it to be fully specified.
        Add the extension to the request.


ERROR in ./node_modules/.pnpm/@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd/node_modules/@ant-design/pro-components/es/index.js 6:1-23
  × Module not found: Can't resolve './list' in 'D:\project\antd-pro\node_modules\.pnpm\@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd\node_modules\@ant-design\pro-components\es'
   ╭─[6:0]
 4 │ export * from "./form";
 5 │ export * from "./layout";
 6 │ export * from "./list";
   · ───────────────────────
 7 │ export * from "./provider";
 8 │ export * from "./skeleton";
   ╰────
  help: Did you mean './list\index.js'?
        
        The request './list' failed to resolve only because it was resolved as fully specified,
        probably because the origin is strict EcmaScript Module,
        e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'.
        
        The extension in the request is mandatory for it to be fully specified.
        Add the extension to the request.


ERROR in ./node_modules/.pnpm/@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd/node_modules/@ant-design/pro-components/es/index.js 7:1-27
  × Module not found: Can't resolve './provider' in 'D:\project\antd-pro\node_modules\.pnpm\@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd\node_modules\@ant-design\pro-components\es'
   ╭─[7:0]
 5 │ export * from "./layout";
 6 │ export * from "./list";
 7 │ export * from "./provider";
   · ───────────────────────────
 8 │ export * from "./skeleton";
 9 │ export * from "./table";
   ╰────
  help: Did you mean './provider\index.js'?
        
        The request './provider' failed to resolve only because it was resolved as fully specified,
        probably because the origin is strict EcmaScript Module,
        e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'.
        
        The extension in the request is mandatory for it to be fully specified.
        Add the extension to the request.


ERROR in ./node_modules/.pnpm/@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd/node_modules/@ant-design/pro-components/es/index.js 8:1-27
  × Module not found: Can't resolve './skeleton' in 'D:\project\antd-pro\node_modules\.pnpm\@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd\node_modules\@ant-design\pro-components\es'
    ╭─[8:0]
  6 │ export * from "./list";
  7 │ export * from "./provider";
  8 │ export * from "./skeleton";
    · ───────────────────────────
  9 │ export * from "./table";
 10 │ export * from "./utils";
    ╰────
  help: Did you mean './skeleton\index.js'?
        
        The request './skeleton' failed to resolve only because it was resolved as fully specified,
        probably because the origin is strict EcmaScript Module,
        e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'.
        
        The extension in the request is mandatory for it to be fully specified.
        Add the extension to the request.


ERROR in ./node_modules/.pnpm/@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd/node_modules/@ant-design/pro-components/es/index.js 9:1-24
  × Module not found: Can't resolve './table' in 'D:\project\antd-pro\node_modules\.pnpm\@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd\node_modules\@ant-design\pro-components\es'
    ╭─[9:0]
  7 │ export * from "./provider";
  8 │ export * from "./skeleton";
  9 │ export * from "./table";
    · ────────────────────────
 10 │ export * from "./utils";
 11 │ export { version } from "./version";
    ╰────
  help: Did you mean './table\index.js'?
        
        The request './table' failed to resolve only because it was resolved as fully specified,
        probably because the origin is strict EcmaScript Module,
        e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'.
        
        The extension in the request is mandatory for it to be fully specified.
        Add the extension to the request.


ERROR in ./node_modules/.pnpm/@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd/node_modules/@ant-design/pro-components/es/index.js 10:1-24
  × Module not found: Can't resolve './utils' in 'D:\project\antd-pro\node_modules\.pnpm\@ant-design+pro-components@_2b666173c5245209f9b5260b18c8dccd\node_modules\@ant-design\pro-components\es'
    ╭─[10:0]
  8 │ export * from "./skeleton";
  9 │ export * from "./table";
 10 │ export * from "./utils";
    · ────────────────────────
 11 │ export { version } from "./version";
    ╰────
  help: Did you mean './utils\index.js'?
        
        The request './utils' failed to resolve only because it was resolved as fully specified,
        probably because the origin is strict EcmaScript Module,
        e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'.
        
        The extension in the request is mandatory for it to be fully specified.
        Add the extension to the request.


Rspack compiled with 10 errors and 4 warnings in 3.18 s

[dosubot]

Hi @weihongyu12! I'm Dosu and I’m helping the pro-components team.

这是一个已知的兼容性问题：@ant-design/pro-components 的 ESM 构建在严格 ESM 环境（如 Rspack、Vite、Webpack 5+，且 package.json 含 "type": "module"）下会因 /es/index.js 内部导入缺少文件扩展名（如 ./card 而不是 ./card.js）导致模块解析失败。根本原因是构建工具（father + babel）未自动补全扩展名，严格 ESM 规范要求必须完整指定路径，详见相关讨论。

目前官方尚未发布修复补丁。常见临时解决方案有：手动 patch node_modules 内的 import 路径加 .js 扩展名（升级/重装依赖后会失效）、配置 webpack/Vite 的 resolve 选项自动补全扩展名（但并非所有工具都支持）、或降级 pro-components 到 3.0.0-beta.3 及以下版本，或降级 antd 到 4.x 以规避问题。生产环境不建议用 alias 或 patch node_modules 的 hack，容易引发其他依赖或功能异常。

建议关注后续版本修复进展，或补充你的构建工具和运行环境信息，寻找更适合你的 workaround。相关 issue 参考：#9393、#6312。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}