React Monorepo – Babel complaining about jsx not being enabled

I’m trying to create a monorepo that uses a Component from one subpackage in another subpackage, but no matter what I do, I get an error about jsx not being enabled within babel. I know the dependency tree is correct because if I console log a string export from the Component, it works. It’s only when I try using an actual Component does it crash.

I’ve tried everything I think of or find on Google searching. I’ve tried adding dependencies on all the babel packages, as well as different combinations of the babel files (babel.config.js, babel.config.json, .babelrc). I’m simply at a loss.

To test this, I downloaded this repo (in case the link gets removed, it’s on github, called “SugandSingh/MonoRepo_with_fullStackTodoList”) – This is just a simple monorepo that uses yarn, created fairly recently, that I found on a Medium Tutorial.

Then under packages/shared I created a Components.js file:

export const SomeComponent = () => {
  console.log("SomeComponent");
  // This does not work
  return <p>SomeComponent</p>;
  // return "SomeComponent"; <-- this works
}

Then I created an index.js file:

export * from './Components'

Finally, from the project root directory, I ran:

yarn install
yarn shared-build
yarn web-start

My versions:

yarn: 3.8.1,
node: 20.11.0
npm: 10.2.4

Error when booting up:

SyntaxError: <local path>packagessharedComponents.js: Support for the experimental syntax 'jsx' isn't currently enabled (4:10):
  2 |   console.log("SomeComponent");
  3 |   // This does not work
> 4 |   return <p>SomeComponent</p>;
    |          ^
  5 |   // return "SomeComponent"; <-- this works
  6 | }

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.

If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
        npx cross-env BABEL_SHOW_CONFIG_FOR=<local path>packagessharedComponents.js <your build command>
See https://babeljs.io/docs/configuration#print-effective-configs for more info.