Question

在这里反应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

您是正确的，问题是{<1>}尚未正确地进行转译以被浏览器理解。 浏览器并不自然地理解react-collision-provider ，因为这是一种语法糖，可以轻松创建您的JSX组件视图。这就是为什么我们使用React将babel转换成JSX本机React.createElement(...);且可以被浏览器理解的JavaScript调用的原因。

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

下载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
在scripts文件的package.json部分中创建一个自定义命令，以转录您的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(...);代码段。

希望有帮助！

将模块导入新的create-react-app项目时，Babel / JSX Transpiler生成时出错

1 个答案: