Importing local package dependencies throws

Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /< path to root >/common/< path to js file >: Support for the experimental syntax 'jsx' isn't currently enabled (3:5): but with any common js files that have jsx, I get the following message:

Repo structure:

• root
  • common
    • svgs
      • package.json
      • *.js
    • scss
      • package.json
      • *.scss
  • site_0
    • package.json
    • src
      • index.js
  • site_1
    • package.json
    • src
      • index.js

site_* package.json dependency statements:

dependencies: { "common-svgs": "file:../common/svgs" }

site_* index.js import statement of common-* package

import "common-svgs/alert.js"

Importing common files like the above work for my common .scss files, but with any common js files that have jsx, I get the following message:

Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /< path to root >/common/svgs/alert.js: Support for the experimental syntax 'jsx' isn't currently enabled (3:5):

This link talks about editing webpack configuration, but I am using the default react-scripts webpack dev server.

In site_*/node_modules/react-scripts/config/webpack.config.js, the loader that processes javascript outside of the app scope does not ( compile ? ) jsx unlike the loader that process application javascript.

Question:

• How do I process ( compile ? ) jsx files outside of the application scope that are local dependency imports without changing the webpack.config.js file in react-scripts ???

Possible ways to do it:

• Is there a way to have a hook run before react-scripts start?
• Is there a way to run a post npm install hook and alter react-scripts webpack.config.js?
• Would it be better to build my common packages?
  • If yes, wouldn't I have to rebuild the common packages for changes?

I added

[
  require.resolve('babel-preset-react-app'),
  {
    runtime: hasJsxRuntime ? 'automatic' : 'classic',
  }
],

to the presets of the loader that processes javascript outside of the app scope... It works, but someone else who clones my app would not be able to render the project with the dev server right out of the box... also, there might be another reason why what i have done is wrong...