Babel/JSX 将模块导入新的 create-react-app 项目时编译器出错

Question

React Noob 在这里。

我被困在这个问题上有一段时间了。

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

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

1) 设置新的 React 应用程序：

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，因为这是可以轻松创建 React 组件视图的语法糖。这就是为什么我们使用 babel 将 JSX 转换为原生 JavaScript 并且可以被浏览器理解的 React.createElement(...); 调用。

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

下载babel-cli:

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

npm install --save-dev @babel/plugin-transform-react-jsx
在 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", ... },
现在您应该能够运行您的自定义命令来转换您的 react-collision-provider 模块：

npm run libTranspile

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

希望对您有所帮助！

Babel/JSX 将模块导入新的 create-react-app 项目时编译器出错

Babel/JSX Transpiler error on build when importing a module into new create-react-app project

reactjs

npm

babeljs

create-react-app

unexpected-token