title: "Add @babel/preset-react ..." error after importing from a react library
body: <p>I made a create-react-app. Now I am trying to refactor some of the react components into a private library named &quot;myLibrary&quot; (initiated with create-react-library) which is in a folder named &quot;myLibrary&quot;, sitting next to &quot;myApp&quot;. &quot;myLibrary&quot; is intended to be a collection of independant, reusable react components (conventionally one file per), css, and other web assets.</p>
  <p>package.json for &quot;myLibrary&quot;</p>
  <pre><code>{
    &quot;name&quot;: &quot;myLibrary&quot;,
    &quot;private&quot;: true,
    &quot;main&quot;: &quot;dist/index.js&quot;,
    &quot;source&quot;: &quot;src/index.js&quot;,
    &quot;type&quot;: &quot;module&quot;,
    &quot;exports&quot;: {
      &quot;./&quot;: &quot;./src/&quot;
    },
  ...
  </code></pre>
  <p>package.json for &quot;myApp&quot;</p>
  <pre><code>{
    &quot;name&quot;: &quot;myApp&quot;,
    &quot;dependencies&quot;: {
      &quot;myLibrary&quot;: &quot;file:../myLibrary&quot;,
  ...
  </code></pre>
  <p>Now, in &quot;myApp&quot; I try to import a react component</p>
  <pre><code>import BaseLayout from 'myLibrary/layout/base'
  </code></pre>
  <p>but I get the following error:</p>
  <pre><code>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 (
  &gt;  9 |       &lt;&gt;
       |       ^
    10 |         &lt;Header /&gt;
    11 |         &lt;main&gt;
    12 |         &lt;/main&gt;
  
  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.
  </code></pre>
  <p>I added a .babelrc to &quot;myApp&quot; with</p>
  <pre><code>{
    &quot;presets&quot;: [&quot;@babel/preset-react&quot;, &quot;@babel/preset-env&quot;],
    &quot;plugins&quot;: [&quot;@babel/plugin-transform-react-jsx&quot;]
  }
  </code></pre>
  <p>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:</p>
  <p>src/index.js for &quot;myLibrary&quot;</p>
  <pre><code>import BaseLayout from './layout/base.js'
  export { BaseLayout }
  </code></pre>
  <p>In &quot;myApp&quot;</p>
  <pre><code>import BaseLayout from 'myLibrary'
  </code></pre>
  <p>What is going on?</p>