Webpack4+TypeScript项目如何强制仅导入CJS模块而不加载ESM模块

解决方案 #

方式1：全局禁用所有第三方库的module字段入口 #

webpack默认会按照优先级读取package.json的入口字段，web环境下webpack4的默认优先级为['browser', 'module', 'main']，你只需要调整resolve.mainFields配置，移除module字段即可，修改后的webpack配置如下：

// 在webpack.config.js的module.exports中新增resolve配置
module.exports = {
  // 保留你原有的所有配置项（entry、output、module等）
  resolve: {
    // 调整入口字段优先级，移除ESM专属的module字段
    mainFields: ['browser', 'main'],
    // 建议补充扩展名配置，避免ts/tsx文件导入报错
    extensions: ['.ts', '.tsx', '.js', '.json']
  },
  // 原有其他配置保持不变
}

配置后webpack加载所有第三方包时都会优先读取main字段指定的CommonJS入口，不会再加载module字段对应的ESM入口。

方式2：仅针对@reduxjs/toolkit单独禁用ESM入口 #

如果你不想影响其他第三方库的ESM加载，也可以用alias单独指定该库的入口：

const path = require('path') // 确保你已经引入了path模块

module.exports = {
  // 原有配置保留
  resolve: {
    alias: {
      '@reduxjs/toolkit': path.resolve(__dirname, 'node_modules/@reduxjs/toolkit/dist/index.js')
    },
    extensions: ['.ts', '.tsx', '.js', '.json']
  }
}

补充方案：直接修复依赖缺失问题 #

你遇到的报错本质是@reduxjs/toolkit的ESM入口将immer列为peer依赖，没有内置打包，你也可以直接安装缺失的依赖解决问题，不需要修改webpack配置：

npm install immer
# 或者用yarn
yarn add immer

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