Directory import ... is not supported resolving ES modules

[NayukiLeung]

环境：

Windows 11 CN
Node 24.3.0
pnpm 10.12.4

我按照文档 https://x.ant.design/docs/react/use-with-vite-cn 的步骤使用 pnpm 和 vite 安装，但是会遇到如下错误

[vite] Internal server error: Directory import 'C:\Users\user\Desktop\langchain-chat-bot\antdx-demo\node_modules.pnpm\antd@5.26.3_react-dom@19.1.0_react@19.1.0__react@19.1.0\node_modules\antd\es\version' is not supported resolving ES modules imported from C:\Users\user\Desktop\langchain-chat-bot\antdx-demo\node_modules.pnpm\antd@5.26.3_react-dom@19.1.0_react@19.1.0__react@19.1.0\node_modules\antd\es\theme\useToken.js
at finalizeResolution (node:internal/modules/esm/resolve:262:11)
at moduleResolve (node:internal/modules/esm/resolve:859:10)
at defaultResolve (node:internal/modules/esm/resolve:983:11)
at nextResolve (node:internal/modules/esm/hooks:748:28)
at o (file:///C:/Users/user/Desktop/langchain-chat-bot/antdx-demo/node_modules/.pnpm/@tailwindcss+node@4.1.11/node_modules/@tailwindcss/node/dist/esm-cache.loader.mjs:1:69)
at nextResolve (node:internal/modules/esm/hooks:748:28)
at Hooks.resolve (node:internal/modules/esm/hooks:240:30)
at MessagePort.handleMessage (node:internal/modules/esm/worker:199:24)
at [nodejs.internal.kHybridDispatch] (node:internal/event_target:827:20)
at MessagePort. (node:internal/per_context/messageport:23:28)

[petercat-assistant]

您在使用 pnpm 和 vite 安装 ant-design/x 时遇到了 ES 模块解析错误。这个问题通常与模块解析路径或配置有关。以下是一些可能的解决方案：

1. 检查 Vite 配置: 确保 Vite 的配置文件中正确配置了 resolve 选项，尤其是 alias 和 extensions。确保路径别名和文件扩展名与项目中的实际路径和文件一致。

2. 更新依赖项: 确保所有相关依赖项（包括 vite、pnpm、antd 等）都是最新版本。有时，更新到最新版本可以解决已知的兼容性问题。

3. 检查 Node.js 版本: 您使用的是 Node.js 24.3.0，确保该版本与所有使用的库兼容。某些库可能尚未完全支持最新的 Node.js 版本。

4. 尝试使用 CommonJS: 如果可能，尝试将项目配置为使用 CommonJS 模块格式，而不是 ES 模块格式。这可能需要调整 vite.config.js 中的 build 选项。

5. 查看文档和社区支持: 查看 ant-design/x 和 Vite 的官方文档，寻找与您的问题相关的已知问题或解决方案。此外，您可以在相关的 GitHub 仓库中搜索类似的问题。

如果这些步骤没有解决问题，请告诉我，我可以帮助您进一步调查或在 GitHub 上为您创建一个问题报告。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[dosubot]

Hi @NayukiLeung! I'm Dosu and I’m helping the x team.

这个报错不是 Ant Design 包本身的问题，而是 Node 24.x、Vite、pnpm 组合下的模块解析兼容性问题。antd/es/version 在源码中确实是一个文件，不是目录，理论上不会触发目录导入错误。近期有相关依赖（如 tsx）升级修复了类似的 ESM 兼容问题，建议确保依赖都是最新版，尤其是 tsx 至少为 v4.19.2 及以上（相关 PR）。

可以尝试以下排查和解决方法：

1. 删除 node_modules 和 pnpm 缓存：pnpm store prune && pnpm install。
2. 确认 antd、vite、tsx 等依赖为最新版本。
3. 检查 vite.config.ts，如有自定义 alias 或 optimizeDeps，尝试加上：

   resolve: {
     alias: {
       'antd/es/version': 'antd/es/version/index.js'
     }
   }

   或直接指定到文件路径。
4. 如果依然报错，可以尝试用 Node 20.x 运行，排查是否为 Node 24.x 的 ESM 行为变更导致。
5. 如果你用的是 Windows，路径大小写和符号也可能影响模块解析，建议路径全部小写并避免中文目录。

目前没有发现官方文档或 issue 直接说明这个问题，但依赖升级和 alias 配置通常能解决类似报错。如还有问题可以补充你的 vite.config.ts 配置和依赖版本信息。

To reply, just mention @dosu.

---

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

[NayukiLeung]

我将 node 降级到 20.19.3

更新了 tsx 到 4.19.2

修改了 vite.config.ts:
import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import path from 'path';

export default defineConfig({
plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
optimizeDeps: {
include: ['antd'],
},
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
alias: {
'antd/es': path.resolve(__dirname, 'node_modules/antd/es'),
}
}
});

问题并没有解决

我后来尝试使用 docker 配合 node:20也没解决

到最后我使用 npm 也一样会有这样的问题