使用create-react-app创建的React应用Babel依赖未解析，引入模块报错求助

问题分析 #

首先，你遇到的第一个编译错误根源在于：create-react-app默认不会转译node_modules目录下的包，而@nross/react-vega的源码使用了未预编译的ES6+语法（比如对象展开运算符...），webpack无法直接解析这些语法，因此提示需要适配的loader。

而你尝试在业务代码中直接导入babel-loader是完全错误的用法——babel-loader是webpack的构建工具，仅能在webpack配置中配置使用，不能在业务运行代码里引入，这也直接导致了第二个错误：babel-core依赖Node.js专属的module模块，浏览器环境无法识别该模块，因此出现"Module not found"的报错。

解决方案 #

方案1：使用react-app-rewired修改配置（推荐，无需eject）

这个工具可以让你在不暴露create-react-app默认配置的前提下，自定义webpack规则：

1. 安装必要依赖：

npm install --save-dev react-app-rewired customize-cra babel-loader @babel/core @babel/preset-env

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",
  "eject": "react-scripts eject"
}

3. 在项目根目录创建config-overrides.js文件，添加配置让webpack转译@nross/react-vega：

const { override, addBabelLoader } = require('customize-cra');

module.exports = override(
  addBabelLoader({
    test: /\.js$/,
    include: /node_modules\/@nross\/react-vega/,
    presets: ['@babel/preset-env', '@babel/preset-react']
  })
);

4. 重新启动项目：npm start

方案2：eject项目（不推荐，操作不可逆）

如果你愿意暴露create-react-app的默认webpack配置：

1. 执行eject命令：

npm run eject

2. 打开config/webpack.config.js，找到处理js文件的babel-loader规则（通常在module.rules数组中，匹配/\.(js|mjs|jsx|ts|tsx)$/的那一项）。
3. 修改exclude规则，让webpack不对@nross/react-vega进行排除：

// 修改前
exclude: /node_modules/,

// 修改后
exclude: /node_modules(?!\/@nross\/react-vega)/,

修改后webpack就会对@nross/react-vega目录下的文件进行babel转译。

方案3：检查包版本是否有预编译版本

先确认@nross/react-vega是否有已完成预编译的更新版本，如果有，直接升级包可能是最简单的解决办法：

npm update @nross/react-vega

额外注意 #

永远不要在业务代码中直接导入webpack loader（比如babel-loader），这些工具属于构建环节依赖，仅能在webpack配置中声明使用，不能在运行时代码里引入。

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