NX Monorepo中Webpack无法解析ESM模块导入的问题

核心问题 #

ESM规范要求相对导入必须带完整文件后缀，但Webpack会严格按照导入路径查找文件，而你的源文件是.ts格式，导致Webpack找不到对应.js文件报错。

解决方案1：配置Webpack的resolve.alias映射后缀 #

在项目的Webpack配置文件中，添加别名规则，将带.js后缀的导入路径映射到对应的.ts文件：

module.exports = {
  resolve: {
    // 正则匹配：将所有以.js结尾的导入路径替换为.ts
    alias: {
      '^(.+)\\.js$': '$1.ts'
    },
    // 确保Webpack能解析TypeScript和JavaScript文件
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  module: {
    rules: [
      // 配置TypeScript解析器
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

如果是NX monorepo，可在项目的project.json中指定自定义Webpack配置：

{
  "targets": {
    "build": {
      "options": {
        "webpackConfig": "./webpack.config.js"
      }
    }
  }
}

解决方案2：调整TypeScript配置配合Webpack解析 #

修改tsconfig.json，确保编译后的ESM文件能正确映射源文件，同时让Webpack自动处理后缀：

1. 确保tsconfig.json的编译选项：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "node",
    "allowImportingTsExtensions": false,
    "resolveJsonModule": true,
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"]
}

2. 在Webpack配置中启用resolve.extensions的自动补全：

module.exports = {
  resolve: {
    extensions: ['.ts', '.js'],
    // 强制导入带后缀，符合ESM规范
    enforceExtension: true
  },
  // ...其他module配置
};

解决方案3：使用NX的内置配置调整 #

如果你不想自定义Webpack配置，可在NX的project.json中调整TypeScript和Webpack的集成选项：

{
  "targets": {
    "build": {
      "executor": "@nrwl/webpack:webpack",
      "options": {
        "target": "web",
        "outputPath": "dist/apps/nxnest",
        "tsConfig": "apps/nxnest/tsconfig.app.json",
        "main": "apps/nxnest/src/main.ts",
        "assets": ["apps/nxnest/src/assets"],
        "webpackConfig": "@nrwl/webpack/webpack.config"
      }
    }
  }
}

验证配置 #

修改配置后，重新执行构建命令：

nx build nxnest

配置正确的话，Webpack会自动将.js后缀的导入映射到.ts源文件，同时TSC编译时会生成带正确.js后缀的ESM文件。

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