将模块导入新的 create-react-app 项目时，构建时出现 Babel/JSX Transpiler 错误

Question

在这里反应菜鸟。

我已经坚持了一段时间。

我试图将一个模块添加到我正在制作的项目中，但发现当我使用新的 create-react-app 运行它时会出现同样的问题。

我相信它与 babel/JSX 相关，因为如果我将导入的模块 src 放入一个新项目或仅放入现有项目的 src 中，它似乎编译得很好，而不是作为导入。

1）设置新的反应应用程序：

npx create-react-app test-project
cd test-project

2）安装包：

npm install --save react-collision-provider

3) 向 App.js 添加导入

+ import { collisionProviderFactory } from 'react-collision-provider';

4）启动项目

npm start

错误：

./node_modules/react-collision-provider/src/components/collisionProviderFactory.js
SyntaxError: /Users/XXXXXXX/Documents/TestProjects/test-project/node_modules/react-collision-provider/src/components/collisionProviderFactory.js: Unexpected token (37:14)

  35 |     render() {
  36 |       const Component = this.props.component;
> 37 |       return (<Component
     |               ^
  38 |         onCollision={this.onCollision}
  39 |         updatePosition={this.updatePosition}
  40 |         {...this.props}

我试图弄乱不同的 babel 设置并弹出项目，但没有运气。 我听说 CRA 不只转译 node_modules src，但不确定如何在 node_modules 中高级编译 JSX？

谢谢。

Answer 1

你是对的，问题是react-collision-provider没有被正确地转换为浏览器理解。 浏览器不会JSX解JSX因为这是轻松创建React组件视图的语法糖。 这就是为什么我们使用babel将JSX转化为React.createElement(...); 调用是原生JavaScript ，可以被浏览器理解。

也许您可以执行以下操作：

1. 下载babel-cli ：

   npm install --save-dev @babel/cli

2. 下载@babel/plugin-transform-react-jsx插件。 我们需要这个插件，因为Babel 6 及更高版本不再有 React 的任何原生转换。 这对于将不受支持的JavaScript功能（例如JSX ）转换为浏览器可以理解的本机JavaScript是必要的。

   npm install --save-dev @babel/plugin-transform-react-jsx

3. 在package.json文件的scripts部分创建一个自定义命令来转换你的react-collision-provider节点模块。 类似于以下内容：

   "scripts": { ... "libTranspile": "babel --plugins @babel/transform-react-jsx <path_to_react_collison_module> --out-dir <path_to_react_collision_module> --copy-files", ... },

4. 现在您应该能够运行您的自定义命令来转换您的react-collision-provider模块：

   npm run libTranspile

现在应该转译react-collision-provider模块，所有JSX代码部分都替换为React.createElement(...); 调用。

希望这有帮助！