React Ionic项目运行报错：无法导入非ES模块的EmptyPcset

问题原因 #

报错Can't import the named export 'EmptyPcset' from non EcmaScript module是因为react-scripts 4.x配套的webpack 4对ES模块与CommonJS模块的互支持存在限制，@tonaljs部分子包的模块格式混合，导致webpack无法正确解析命名导出。

解决方案 #

方案一：用react-app-rewired修改webpack配置 #

1. 安装依赖

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

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

module.exports = function override(config, env) {
  config.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: 'javascript/auto'
  });
  return config;
};

3. 修改package.json中的启动脚本，将react-scripts替换为react-app-rewired：

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

4. 重新启动项目：

npm start

方案二：用Craco配置（更适配Ionic项目） #

1. 安装依赖

npm install @craco/craco @ionic/craco-config --save-dev

2. 根目录新建craco.config.js文件：

const { ionicCracoConfig } = require('@ionic/craco-config');

module.exports = {
  ...ionicCracoConfig,
  webpack: {
    configure: (config) => {
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      });
      return config;
    }
  }
};

3. 更新package.json的启动脚本：

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

4. 重启项目。

方案三：降级@tonaljs版本 #

尝试降级到模块格式更兼容的版本，执行：

npm install @tonaljs/tonal@4.5.0

完成后重新运行项目。

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