从 React 库导入后出现"Add @babel/preset-react ..."错误

Question

我制作了一个create-react应用程序。现在我正试图将一些react组件重构为一个名为"的私有库；myLibrary"；(通过创建react库启动(，该库位于名为"的文件夹中；myLibrary"；，坐在"；myApp"myLibrary"；旨在成为独立的、可重复使用的react组件(通常每个组件一个文件(、css和其他web资产的集合。

package.json；myLibrary"；

{
"name": "myLibrary",
"private": true,
"main": "dist/index.js",
"source": "src/index.js",
"type": "module",
"exports": {
"./": "./src/"
},
...

package.json；myApp"；

{
"name": "myApp",
"dependencies": {
"myLibrary": "file:../myLibrary",
...

现在，在"；myApp"；我试图导入一个反应组件

import BaseLayout from 'myLibrary/layout/base'

但我得到以下错误：

ERROR in ../myLibrary/src/layout/base.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /myLibrary/src/layout/base.js: Support for the experimental syntax 'jsx' isn't currently enabled (9:7):
7 |   render(){
8 |     return (
>  9 |       <>
|       ^
10 |         <Header />
11 |         <main>
12 |         </main>
Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.

我在"；myApp"；带有

{
"presets": ["@babel/preset-react", "@babel/preset-env"],
"plugins": ["@babel/plugin-transform-react-jsx"]
}

由于这是一个create-rect应用程序，我尝试了react应用程序重新布线/自定义cra以及弹出以使用.babelrc。在确认.babelrc已加载后，我仍然收到相同的错误。我也尝试过以下方法，但仍然遇到同样的问题：

src/index.js用于"；myLibrary"；

import BaseLayout from './layout/base.js'
export { BaseLayout }

在"；myApp"；

import BaseLayout from 'myLibrary'

发生了什么事？

Answer 1

检查node_modules/react-scripts/config/webpack.config.js并查找

// @remove-on-eject-begin
babelrc: false,
configFile: false,

然后设置babelrc: true，以启用.babelrc文件更改以工作

注意：您必须将.babelrc.json放在"MyApp"的src文件夹中(与package.json所在的文件夹相同