React应用启动报loader错误，无法加载export * as语法导出的buttonList

错误原因 #

报错是因为依赖包中使用了export * as xxx的ES2020命名空间导出语法，你的项目现有Babel/Webpack配置未兼容该语法，无法解析node_modules内的这段代码。

解决方案 #

• 方案1：新增Babel插件兼容语法
  1. 安装语法支持插件：

  npm install @babel/plugin-proposal-export-namespace-from --save-dev
  

  2. 修改项目Babel配置文件（.babelrc或babel.config.js），在plugins数组中新增配置：

  {
    "plugins": ["@babel/plugin-proposal-export-namespace-from"]
  }
  

• 方案2：未eject的CRA项目适配
  如果你用的是未执行eject的create-react-app项目，无法直接修改Babel配置，可通过react-app-rewired修改配置：
  1. 安装依赖：

  npm install react-app-rewired customize-cra @babel/plugin-proposal-export-namespace-from --save-dev
  

  2. 修改package.json的scripts字段，把react-scripts替换为react-app-rewired：

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

  3. 项目根目录新建config-overrides.js，添加如下配置：

  const { addBabelPlugin, override } = require('customize-cra');
  module.exports = override(
    addBabelPlugin('@babel/plugin-proposal-export-namespace-from')
  );
  

• 方案3：手动配置Webpack转译范围
  如果是自行维护Webpack配置的项目，需要修改babel-loader的exclude规则，允许转译出问题的依赖包：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules\/(?!(@evenlogics\/whf-reactadmin|suneditor-react)\/)/,
          use: ['babel-loader']
        }
      ]
    }
  }
  

• 方案4：绕过依赖导出直接导入
  临时方案可以直接从依赖的内部路径导入buttonList，无需修改配置：

  import * as buttonList from '@evenlogics/whf-reactadmin/es/SundEditor'
  // 路径根据依赖实际目录结构调整即可
  

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