從反應庫導入后出現“添加@babel/preset-react...”錯誤

Question

我制作了一個 create-react-app。 現在我正在嘗試將一些 react 組件重構為一個名為“myLibrary”（由 create-react-library 啟動）的私有庫，該庫位於一個名為“myLibrary”的文件夾中，位於“myApp”旁邊。 “myLibrary”旨在成為獨立、可重用的反應組件（通常每個文件一個文件）、css 和其他 web 資產的集合。

“我的圖書館”的 package.json

{
  "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.

我將 a.babelrc 添加到“myApp”

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

由於這是一個 create-react-app，我嘗試了 react-app-rewired/customize-cra 以及彈出到 use.babelrc。 在確認.babelrc 已加載后，我仍然得到同樣的錯誤。 我也嘗試了以下方法，但仍然遇到同樣的問題：

“我的圖書館”的 src/index.js

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

在“我的應用程序”中

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相同的文件夾