Babel/JSX 将模块导入新的 create-react-app 项目时编译器出错
Babel/JSX Transpiler error on build when importing a module into new create-react-app project
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
谢谢。
你是对的,问题是 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(...);
调用。
希望对您有所帮助!
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谢谢。
你是对的,问题是 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(...);
调用。
希望对您有所帮助!