React TypeScript+Craco构建时CommonJS模块导入报错求助

在使用Craco的React TypeScript项目中集成CommonJS仓库包时，craco start启动开发服务一切正常，但执行craco build构建时出现错误：

Attempted import error: 'B' is not exported from './test' (imported as 'test')

测试示例代码如下：
./test.js

class A {
    test() {
        console.log('a')
    }
}

class B {
    test() {
        console.log('a')
    }
}

module.exports = {
    A,
    B
}

./service.ts

import * as test from './test'
console.log(test.B)

解决方案 #

1. 修正TypeScript配置 #

在tsconfig.json中调整以下配置项，确保TypeScript能正确解析CommonJS模块：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

• moduleResolution: "node"：采用Node.js原生的模块解析逻辑，匹配CommonJS模块的导出规则
• esModuleInterop: true：打通CommonJS与ES模块的互操作性，消除两种模块语法的解析差异
• allowSyntheticDefaultImports: true：允许以默认导入的方式加载CommonJS模块，避免解析偏差

2. 调整Craco的Webpack构建配置 #

在craco.config.js中修改Webpack配置，对齐开发与生产环境的CommonJS模块处理逻辑：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 关闭模块合并优化，避免TS无法识别CommonJS导出属性
      webpackConfig.optimization.concatenateModules = false;
      // 使用命名模块ID，便于调试和解析
      webpackConfig.optimization.moduleIds = 'named';
      
      // 确保Babel正确转换CommonJS模块
      const babelRule = webpackConfig.module.rules.find(rule => rule.loader === 'babel-loader');
      if (babelRule) {
        babelRule.options.plugins = [...(babelRule.options.plugins || []), '@babel/plugin-transform-modules-commonjs'];
      }
      
      return webpackConfig;
    }
  }
};

生产构建默认启用的模块合并优化会改变模块结构，导致TypeScript无法正确识别CommonJS导出的属性；添加Babel插件可确保开发与生产环境的模块转换逻辑一致。

3. 临时调整导入方式（快速验证） #

若上述配置调整后仍未解决问题，可临时修改导入语法为默认导入：

import test from './test'
console.log(test.B)

这种方式更贴合CommonJS模块的导出逻辑，能避开TS在生产构建时的解析歧义。

问题根源 #

开发环境与生产构建的Webpack配置存在核心差异：

• 生产构建默认启用concatenateModules（模块合并）和严格的tree-shaking优化，压缩模块结构的同时可能破坏TS对CommonJS导出属性的识别
• 若未开启esModuleInterop，TypeScript对import * as语法的解析在生产构建中会更严格，而开发环境因Webpack的宽松处理能正常运行

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