Babel config file not working in Lerna monorepo

Question

I'm using Lerna to build a monorepo containing several React apps and some custom libraries (utils, UI React components, etc.).

Here's the structure of my monorepo so far:

packages
  app1
  app2
  ui-component
  utils

But when I try using my libs in my apps I get these 2 issues:

    SyntaxError: ...\packages\ui-component\index.js Support for the experimental syntax 'classProperties' isn't currently enabled (2:8):
    
      1 | class Foo {
    > 2 |   name = 'This is Foo'
        |        ^
      3 | }
    
    Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
    If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing.

    SyntaxError: ...\packages\ui-component\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (3:5):
    
      1 | function Foo() {
      2 |   return (
    > 3 |     <div>Foo React Component</div>
        |     ^
      4 |   );
      5 | }
    
    Add @babel/preset-react (https://git.io/JfeDR) 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://git.io/vb4yA) to the 'plugins' section to enable parsing.

The error messages being quite explicit, I read about Babel config files here and, having installed @babel/preset-react and @babel/plugin-proposal-class-properties, created the following babel.config.json:

{
  "presets": [
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

But for some reason, it's not taken into account.

I tried to place this file at the root of my monorepo. I tried to put it in my packages. I tried to rename it to .babelrc.json. I tried to put these settings in my package.json in a "babel" section. To no avail...

Note: I don't have any webpack.config.js and I'd rather not eject my app.

Answer 1

For those interested, my problem simply was that my code wasn't transpiled and was copied as-it-is in my app's node_modules folder. So, what I did is:

1. moved index.js to src/index/js
2. changed my package.json to:

{
  "name": "utils",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "transpile": "babel src --watch --out-dir dist --source-maps inline --copy-files"
  },
  "author": "",
  "license": "ISC",
  "babel": {
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  },
  "dependencies": {
    "@babel/cli": "^7.13.10",
    "@babel/plugin-proposal-class-properties": "^7.13.0"
  }
}

Then I ran npm run transpile and my library code is now correctly imported in my app.

And yes, Babel config works fine when defined in package.json.