Reactjs 使用React从monorepo中的另一个包导入JSX文件时出错

我创建了一个简单的项目来研究monorepo。该示例由三个React应用程序组成，其中一个应用程序包含一个带有故事书的组件库，另外两个应用程序将导入此包的组件

但是，我无法从另一个包导入组件。 导入公共函数时，不会发生错误

错误消息

。/components/src/button/button.js
SyntaxError:/home/thiago/Documentos/Dev/projects/learn monorepo/packages/components/src/button/button.js：当前未启用对实验语法“jsx”的支持（7:5）：
5 |功能按钮（{label，…rest}）{
6 |返回(
>  7 |     
|     ^
8 |       
9 |{label}
10 |       
添加@babel/预设反应(https://git.io/JfeDR)转到Babel配置的“预设”部分以启用转换。
如果您想保持原样，请添加@babel/plugin语法jsx(https://git.io/vb4yA)转到“插件”部分以启用解析。

按钮组件

功能按钮（{label，…rest}）{
返回(
{label}
);
}
导出{按钮}；

App.js

从“React”导入React；
从'@project/components'导入{Button}；
函数App（）{
返回(
你好，世界-应用程序01
);
}
导出默认应用程序；

Package.json

{
“名称”：“项目”，
“版本”：“1.0.0”，
“main”：“build/index.js”，
“作者”：“蒂亚戈”，
“许可证”：“麻省理工学院”，
“私人”：没错，
“工作区”：{
“包”：[“包/*”]
},
“巴别塔”：{
“预设”：[
“@babel/预设反应”
],
“插件”：[
“@babel/plugin语法jsx”
]
},
“脚本”：{
“引导”：“lerna引导”，
“开始：app-01”：“勒纳运行——范围@project/app-01开始”，
“开始：app-02”：“勒纳运行——范围@project/app-02开始”，
“开始：故事书”：“lerna run--scope@project/components故事书”，
“开始：网络”：“纱线开始：app-01和纱线开始：app-02和纱线开始：故事书”
},
“依赖性”：{
“@babel/plugin语法jsx”：“^7.12.1”，
“@babel/preset react”：“^7.12.10”，
“巴别塔加载器”：“8.1.0”，
“勒纳”：“^3.22.1”
}
}

由于您尚未传输共享的react组件，因此出现错误。有些组件（非官方）使用

create react app

解决此问题。其中之一是使用

react app rewired

和

customize cra

。将lthem安装为开发依赖项，并将

config overrides.js

文件添加到

create react app

的根目录中：

var path = require('path')
const { override, babelInclude } = require('customize-cra')

module.exports = function (config, env) {
  return Object.assign(
    config,
    override(
      babelInclude([
        /* transpile (converting to es5) code in src/ and shared component library */
        path.resolve('src'),
        path.resolve('../components'),
      ])
    )(config, env)
  )
}

然后在脚本中使用重新布线的

react app

而不是

react scripts

，以启动和构建项目：

"scripts": {
        "start": "react-app-rewired start",
        "build-prod": "react-app-rewired build",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-scripts eject"
},

---

帮了很多忙…谢谢！

import React from 'react';
import { Button } from '@project/components';

function App() {
  return (
    <div>
      <h1>Hello World - App 01</h1>
      <Button label="Button"/>
    </div>
  );
}

export default App;

var path = require('path')
const { override, babelInclude } = require('customize-cra')

module.exports = function (config, env) {
  return Object.assign(
    config,
    override(
      babelInclude([
        /* transpile (converting to es5) code in src/ and shared component library */
        path.resolve('src'),
        path.resolve('../components'),
      ])
    )(config, env)
  )
}

"scripts": {
        "start": "react-app-rewired start",
        "build-prod": "react-app-rewired build",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-scripts eject"
},