"Add @babel/preset-react ..." error after importing from a react library

Question

I made a 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". "myLibrary" is intended to be a collection of independant, reusable react components (conventionally one file per), css, and other web assets.

package.json for "myLibrary"

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

package.json for "myApp"

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

Now, in "myApp" I try to import a react component

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

{
  "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. After confirming that.babelrc is loaded, I still get the same error. I've also tried the following and still get the same problem:

src/index.js for "myLibrary"

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

In "myApp"

import BaseLayout from 'myLibrary'

What is going on?

Answer 1

check node_modules/react-scripts/config/webpack.config.js and look for

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

then set babelrc: true , to enable .babelrc file changes to work

note: You have to put .babelrc.json in the src folder of 'MyApp' (same folder where you have package.json