Vite+React+TS SSR项目中Ant Design模块导入报错求助

问题说明 #

在基于 Vite+React+TypeScript 的项目中实现服务端渲染（SSR）时，引入 Ant Design 后出现模块语法错误：

C:\Users\user\Desktop\SSR\ssr\node_modules\antd\es\input\TextArea.js:1
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

已在package.json中设置"type": "module"，相关配置文件如下：

vite.config.ts #

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import viteTsconfigPaths from "vite-tsconfig-paths";
import svgrPlugin from "vite-plugin-svgr";
import { splitVendorChunkPlugin } from "vite";

import dns from "dns";

dns.setDefaultResultOrder("verbatim");

export default defineConfig({
  define: {
    "process.env": {},
  },
  resolve: {
    alias: [
      {
        find: "stream",
        replacement: `stream-browserify`,
      },
    ],
  },
  plugins: [
    react(),
    viteTsconfigPaths(),
    svgrPlugin(),
    splitVendorChunkPlugin(),
  ],
  build: {
    outDir: "build",
    cssCodeSplit: false,
  },
  ssr: {
    noExternal: ["styled-components", "@emotion/*", /(node_modules)/],
  },
  server: {
    open: true,
    port: 3000,
  },
  preview: {
    port: 8000,
  },
});

tsconfig.json #

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "types": ["jest", "vite/client"],
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "allowJs": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

解决方案 #

1. 修正 SSR 外部依赖配置 #

当前ssr.noExternal使用/(node_modules)/会强制所有第三方包不被外部化，导致Ant Design的ES模块代码在Node环境中无法被正确编译。修改为仅指定需要特殊处理的包：

ssr: {
  noExternal: ["styled-components", "@emotion/*", "antd", "@ant-design/*"],
},

2. 添加依赖优化配置 #

在vite.config.ts中添加optimizeDeps配置，确保Ant Design被正确预编译：

optimizeDeps: {
  include: ["antd"],
  esbuildOptions: {
    loader: {
      ".js": "jsx",
    },
  },
},

3. 检查 Node 环境的 TypeScript 配置 #

确认tsconfig.node.json的配置适配Node环境，示例如下：

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

内容的提问来源于stack exchange，提问作者CraZyDroiD