Javascript 创建React应用程序：在节点_模块中传输外部包的JSX

我正在尝试在我的react项目中使用该软件包

我已经使用createappreact命令创建了我的项目

导入包后，我出现以下错误：

未能编译

./node_modules/react-scratchblocks/src/Scratchblocks.js
SyntaxError: /Users/jorge/Documents/React/elimu-analyzer-frontend/node_modules/react-scratchblocks/src/Scratchblocks.js: Unexpected token (45:6)

  43 |     const scripts = this.parseScripts(this.props.code);
  44 |     return (
> 45 |       <div className={this.classNames()}>
     |       ^
  46 |         {scripts.map((script,i) => (
  47 |           <Scratchblock key={i} className="script" script={script}/>
  48 |         ))}

更新2： 我在其中导入块的组件

import React, { useState } from 'react';
import { withRouter } from 'react-router-dom';
import './styles.css';
import Fire from '../../config/Fire';
import Realtime from '../Realtime';
import Scratchblocks from 'react-scratchblocks'

function Content(props) {

const [menuOption, setMenuOption] = useState(1);

async function logout() {
    await Fire.logout();
    props.history.push('/');
    console.log('oi');
}

if (menuOption === 0) {
    return (
        <div class='content'>
            <Realtime />
        </div>
    );
}
else if (menuOption === 1) {
    return (
        <div class="content">
            <button onClick={logout}> OUTRA OPÇÃO </button>
        </div>
    );
}
}

export default withRouter(Content);

import React，{useState}来自“React”；
从“react router dom”导入{withRouter}；
导入“./styles.css”；
从“../../config/Fire”导入火；
从“../Realtime”导入实时；
从“react Scratchblocks”导入Scratchblocks
功能内容（道具）{
const[menuOption，setMenuOption]=useState（1）；
异步函数注销（）{
等待开火。注销（）；
props.history.push（'/'）；
console.log（'oi'）；
}
如果（菜单选项===0）{
返回(
);
}
else if（菜单选项===1）{
返回(
奥特拉奥普乔
);
}
}
使用路由器导出默认值（内容）；

在

节点模块内创建React应用程序（CRA）

这不包括JSX编译。由于以下原因导致的程序包错误：

SyntaxError:…/Scratchblocks.js:意外标记（45:6）

来自维护者（）的语句：

我们只在node_模块中编译有效的JavaScript语法。JSX不是有效的JavaScript。您正在使用JSX

我们采取这种立场的原因是，编译非标准语法将库与构建工具紧密结合在一起

一旦你允许实验性的东西，也很难划清界限。大多数人不仅希望使用JSX，还希望使用实验转换，如类属性。或者装饰师。现在，我们必须与每个库维护人员争论我们想要支持哪些转换，哪些不需要

因此，在发布之前，包作者需要自己传输JSX

要手动传输JSX 1，您可以在

节点\u模块内
应用以下命令：

babel node_modules/react-scratchblocks \
  -d node_modules/react-scratchblocks/dist \
  --presets=@babel/preset-react

可能会将其外包到自己的（
transfile.js
）：

babel节点\u模块/块\
-d节点\ U模块/反应块/距离\
--配置文件。/transfile.js

然后调整
node\u modules/resact scratchblocks/package.json中的
main
条目，以指向
dist
中先前传输的版本：

"main": "dist/index.js",

可以进一步自动化修复损坏包的过程

请记住，这只是一种变通方法——包开发人员有责任分发具有标准JavaScript特性的npm包

1另一种选择是调整网页包配置（仅在弹出CRA时才可能）。
我个人建议您使用
craco
（请参阅）

Craco是一个功能强大的工具，允许您编辑内置的
create react app
配置，而无需强制您弹出项目

如何安装


运行
npm安装@craco/craco--save dev
运行npm安装craco babel loader——保存开发文件
在项目的根文件夹中创建
craco.config.js
更新
package.json中的脚本：

react脚本启动
->
craco启动
react脚本构建
->
craco构建



这是配置craco文件的内容

const path=require（'path'））
常量fs=require（'fs'）
常量cracoBabelLoader=require（'craco-babel-loader'）
//管理包的相对路径
const appDirectory=fs.realpathSync（process.cwd（））
const resolvePackage=relativePath=>path.resolve（appDirectory，relativePath）
module.exports={
插件：[
{
插件：cracoBabelLoader，
选项：{
包括：[
resolvePackage（“节点\模块/包到传输”），
resolvePackage（“要传输的节点\模块/另一个包”），
],
},
},
],
}

您可以更改许多其他配置，我建议您查看

信条：
Hi@ford04。谢谢你的关注。我在我的根目录中创建了以下babel.config.js文件，如“更新1”中所示。那我现在该怎么办？这是正确的方法吗？正如我在链接中看到的，看起来是这样，但我不知道现在该怎么办。我现在如何执行我的代码进行测试？谢谢你的建议。你能提供发生此错误的组件代码吗？大多数情况下，当我们没有从功能组件中的“React”
导入React时，或者当babel无法进行trasnpile时，就会发生这种情况。@DarpanRangari在更新2中添加。正如你们所看到的，我是正确的。惊人的，简洁的，回答！非常感谢。
module.exports = {
  ...
  overrides: [
    {
      test: ["./node_modules/react-scratchblocks"],
      presets: ["@babel/preset-react"]
    }
  ]
};

"main": "dist/index.js",