React执行npm run build报错：目标环境不支持dynamic import()语法

核心问题分析 #

报错提示The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script，本质是构建目标环境不支持ES模块的动态import()语法，同时代码或配置中存在ES模块（type: module）与CommonJS的混用冲突，tsconfig配置未对齐构建工具的目标环境要求。

具体解决步骤 #

1. 调整tsconfig.json配置 #

• 修改target字段：将目标ES版本设置为环境兼容的版本（比如ES2020或更低），确保动态import()被转译为环境支持的代码：

  {
    "compilerOptions": {
      "target": "ES2020",
      "module": "ESNext",
      "moduleResolution": "node",
      "allowJs": true,
      "esModuleInterop": true,
      // 保留其他原有配置
    }
  }
  

• 若使用Create React App（CRA），注意CRA会覆盖部分tsconfig配置，可通过rescripts自定义构建配置，或直接修改tsconfig.json中的include/exclude确保覆盖所有文件。

2. 修正package.json的模块配置 #

• 若package.json中存在"type": "module"字段，尝试移除它（除非项目完全基于ES模块构建且环境支持），避免与CommonJS依赖冲突。
• 若必须保留"type": "module"，需确保所有依赖包均支持ES模块，同时安装@babel/plugin-syntax-dynamic-import并在babel配置中启用，转译动态import()语法。

3. 配置构建工具适配目标环境 #

• 若底层使用webpack（如CRA），在自定义webpack配置中设置target为web，并确保babel-loader转译TypeScript/JavaScript文件：

  module.exports = {
    target: 'web',
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          use: {
            loader: 'babel-loader',
            options: {
              plugins: ['@babel/plugin-syntax-dynamic-import']
            }
          },
          exclude: /node_modules/
        }
      ]
    }
  }
  

• 若使用Vite，修改vite.config.ts中的构建目标：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    build: {
      target: 'es2020'
    }
  });
  

4. 规范组件导入语句 #

• 避免在同一文件中混用ES模块的import和CommonJS的require语法。
• 对于React懒加载的动态导入，确保写法符合规范，且被构建工具正确处理：

  import React, { lazy, Suspense } from 'react';
  const LazyComponent = lazy(() => import('./LazyComponent'));
  
  // 使用时配合Suspense
  function App() {
    return (
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    );
  }
  

验证与排查 #

1. 清理依赖缓存：删除node_modules和package-lock.json，重新安装依赖：

   rm -rf node_modules package-lock.json
   npm install
   

2. 执行npm run build，若仍报错，根据终端提示的具体文件路径，定位到使用动态import()的文件，针对性调整转译配置。

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