引入本地React组件依赖后npm start报Unexpected token错误求助

问题根源 #

这个错误的核心原因很明确：create-react-app（以下简称CRA）默认会跳过node_modules目录下所有文件的Babel编译。你的nice-component通过file:../nice-component安装后，会被CRA当作node_modules里的第三方依赖处理，它里面的JSX代码（比如<Grid>标签）没有被转译为浏览器能识别的普通JavaScript，所以才会抛出"Unexpected token"语法错误。

你之前自己配置Babel/Webpack的项目能正常工作，是因为你当时主动把本地开发的组件目录加入了Babel的编译范围，而CRA为了构建性能默认排除了node_modules。

解决方案 #

下面提供几种可行的解决方法，按推荐程度排序：

1. 用craco修改CRA的Webpack配置（推荐）

CRA本身不允许直接修改Webpack配置，craco是官方推荐的配置修改工具，步骤如下：

• 首先安装craco：

  npm install @craco/craco --save-dev
  

• 修改final-app的package.json里的scripts，把原来的react-scripts替换成craco：

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

• 在final-app根目录新建craco.config.js，添加如下配置，让Webpack编译你的nice-component：

  const path = require('path');
  
  module.exports = {
    webpack: {
      configure: (config) => {
        // 给处理JS/JSX的规则添加你的本地组件目录
        config.module.rules.forEach(rule => {
          if (rule.oneOf) {
            rule.oneOf.forEach(oneOfRule => {
              if (oneOfRule.test && oneOfRule.test.toString().includes('js|jsx')) {
                oneOfRule.include.push(path.resolve(__dirname, '../nice-component'));
              }
            });
          }
        });
        return config;
      },
    },
  };
  

• 重启npm start，应该就能正常编译了。

2. 将nice-component编译为预构建的组件库

如果你的组件后续要复用给更多项目，最好把它编译成标准的npm包：

• 在nice-component目录下安装Babel相关依赖：

  npm install @babel/core @babel/preset-react @babel/preset-env babel-cli --save-dev
  

• 新建.babelrc配置文件：

  {
    "presets": ["@babel/preset-react", "@babel/preset-env"]
  }
  

• 在nice-component的package.json里添加编译脚本，并指定main字段为编译后的入口：

  "scripts": {
    "build": "babel src --out-dir dist"
  },
  "main": "dist/index.js"
  

• 执行npm run build编译组件，然后在final-app里重新安装依赖，此时安装的是编译好的ES5代码，就不会有JSX语法问题了。

3. 避免使用file:路径，改用npm link并调整CRA配置

如果你习惯用npm link来调试本地组件，同样需要用craco把linked的组件目录加入编译范围，配置逻辑和第一种方法一致，只是把路径改成你本地nice-component的实际路径即可。

补充说明 #

你之前尝试在final-app里添加所有material-ui依赖是没用的，因为错误不是缺少依赖包，而是组件本身的JSX代码未被编译。另外，不推荐直接执行npm run eject，除非你确定要长期维护自己的Webpack/Babel配置，因为eject后就无法再享受CRA的官方更新和优化了。

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