空React项目引入forge-dataviz-iot-react-components报错需配置什么webpack loader

这个报错是因为forge-dataviz-iot-react-components npm包发布时未预编译内部的.jsx文件，而create-react-app默认的webpack配置仅会处理项目源码目录下的jsx语法，不会解析node_modules中的jsx标签，因此识别到<TreeItem>这类jsx语法时会抛出解析失败错误。

分两种场景处理：

场景1：未执行eject的create-react-app项目 #

推荐使用craco修改默认配置，无需暴露webpack配置：

• 第一步：安装所需依赖

npm install @craco/craco babel-loader @babel/preset-react --save-dev

• 第二步：项目根目录新建craco.config.js，添加如下配置：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const babelLoaderRule = webpackConfig.module.rules.find(
        rule => rule.oneOf
      ).oneOf.find(
        rule => rule.test.toString().includes('jsx')
      );
      // 修改babel-loader的排除规则，允许处理目标包的jsx文件
      babelLoaderRule.exclude = /node_modules\/(?!forge-dataviz-iot-react-components)/;
      return webpackConfig;
    }
  }
}

• 第三步：修改package.json中的scripts命令，把react-scripts替换为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

场景2：已执行eject或自定义webpack配置的项目 #

直接修改webpack配置文件即可：

• 找到处理.js/.jsx文件的babel-loader规则，将原有exclude: /node_modules/配置修改为：

exclude: /node_modules\/(?!forge-dataviz-iot-react-components)/

• 确认你的babel配置中已添加@babel/preset-react预设，支持jsx语法解析。

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