[英]"Add @babel/preset-react ..." error after importing from a react library
I made a create-react-app.我制作了一个 create-react-app。 Now I am trying to refactor some of the react components into a private library named "myLibrary" (initiated with create-react-library) which is in a folder named "myLibrary", sitting next to "myApp".
现在我正在尝试将一些 react 组件重构为一个名为“myLibrary”(由 create-react-library 启动)的私有库,该库位于一个名为“myLibrary”的文件夹中,位于“myApp”旁边。 "myLibrary" is intended to be a collection of independant, reusable react components (conventionally one file per), css, and other web assets.
“myLibrary”旨在成为独立、可重用的反应组件(通常每个文件一个文件)、css 和其他 web 资产的集合。
package.json for "myLibrary" “我的图书馆”的 package.json
{
"name": "myLibrary",
"private": true,
"main": "dist/index.js",
"source": "src/index.js",
"type": "module",
"exports": {
"./": "./src/"
},
...
package.json for "myApp" package.json 用于“myApp”
{
"name": "myApp",
"dependencies": {
"myLibrary": "file:../myLibrary",
...
Now, in "myApp" I try to import a react component现在,在“myApp”中,我尝试导入一个反应组件
import BaseLayout from 'myLibrary/layout/base'
but I get the following error:但我收到以下错误:
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.
I added a.babelrc to "myApp" with我将 a.babelrc 添加到“myApp”
{
"presets": ["@babel/preset-react", "@babel/preset-env"],
"plugins": ["@babel/plugin-transform-react-jsx"]
}
and since this is a create-react-app, I tried both react-app-rewired/customize-cra as well as ejecting to use.babelrc.由于这是一个 create-react-app,我尝试了 react-app-rewired/customize-cra 以及弹出到 use.babelrc。 After confirming that.babelrc is loaded, I still get the same error.
在确认.babelrc 已加载后,我仍然得到同样的错误。 I've also tried the following and still get the same problem:
我也尝试了以下方法,但仍然遇到同样的问题:
src/index.js for "myLibrary" “我的图书馆”的 src/index.js
import BaseLayout from './layout/base.js'
export { BaseLayout }
In "myApp"在“我的应用程序”中
import BaseLayout from 'myLibrary'
What is going on?到底是怎么回事?
check node_modules/react-scripts/config/webpack.config.js
and look for检查
node_modules/react-scripts/config/webpack.config.js
并寻找
// @remove-on-eject-begin
babelrc: false,
configFile: false,
then set babelrc: true
, to enable .babelrc
file changes to work然后设置
babelrc: true
,以使.babelrc
文件更改生效
note: You have to put .babelrc.json
in the src folder of 'MyApp' (same folder where you have package.json
注意:您必须将
.babelrc.json
放在“MyApp”的 src 文件夹中(与package.json
相同的文件夹
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.