Create React App中CommonJS项目引入ES6模块的问题咨询

我帮你梳理下这个问题的解决思路，其实CRA的模块解析逻辑确实会优先读取包的module字段——这是因为它底层依赖的webpack默认会优先处理ES模块入口，方便做tree-shaking这类优化。不过如果你确实需要强制项目使用CommonJS（CJS）入口，有几种可行的办法：

1. 全局修改webpack解析优先级（推荐全局场景） #

CRA默认不允许直接修改webpack配置，所以我们需要借助react-app-rewired和customize-cra来覆盖默认配置：

• 首先安装依赖：

  npm install react-app-rewired customize-cra --save-dev
  

• 在项目根目录创建config-overrides.js文件，添加以下配置：

  const { override, adjustWebpackConfig } = require('customize-cra');
  
  module.exports = override(
    adjustWebpackConfig((webpackConfig) => {
      // 将main字段（CJS入口）的优先级提到module字段之前
      webpackConfig.resolve.mainFields = ['main', 'module'];
      return webpackConfig;
    })
  );
  

• 修改package.json里的启动脚本，替换成react-app-rewired：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
  

2. 针对单个包指定CJS入口（推荐精准场景） #

如果只是某个特定的包导致问题，没必要全局修改，直接给这个包配置别名指向它的CJS文件即可：

• 同样需要先安装react-app-rewired和customize-cra，然后在config-overrides.js里添加：

  const { override, addWebpackAlias } = require('customize-cra');
  const path = require('path');
  
  module.exports = override(
    addWebpackAlias({
      // 替换成你有问题的包名，以及它的CJS文件实际路径
      'target-package': path.resolve(__dirname, 'node_modules/target-package/dist/index.cjs')
    })
  );
  

• 注意要确认目标包的CJS文件位置，一般在dist或lib目录下，可查看该包的package.json里的main字段对应的路径。

3. 用Babel转译ES模块（兜底方案） #

如果目标包没有单独的CJS入口，只能通过Babel把它的ES模块转成CJS兼容格式：

• 在config-overrides.js里配置babel-loader处理目标包：

  const { override, addBabelLoader } = require('customize-cra');
  
  module.exports = override(
    addBabelLoader({
      // 匹配目标包的文件路径
      test: /node_modules\/target-package\/.*/,
      presets: ['@babel/preset-env', '@babel/preset-react']
    })
  );
  

补充说明：CRA官方文档说兼容CJS和ES模块，但它的默认解析优先级是module > main，所以才会出现你遇到的“明明项目用CJS，却导入了ES模块”的情况。上面的方案里，全局修改优先级适合整个项目都需要优先用CJS的场景，单个包别名更灵活，转译则是没办法的兜底选择。

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