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 |     Foo React Component
        |     ^
      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.

user_603393 · Answer

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:

moved index.js to src/index/js
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.

Babel config file not working in Lerna monorepo

1 Answers