Babel preset not loading on monorepo project

Question

I have a monorepo using Lerna with the following structure:

monorepo
  |--  server
  |--  package1
  |--  package2

All packages uses Babel and after installing the 3 projects yarn copied all @babel libraries to monorepo/node_modules. So, there is no babel installed on projects, just in the monorepo repository.

My lerna.json:

{
  "lerna": "2.9.0",
  "npmClient": "yarn",
  "useWorkspaces": true,
  "packages": [
    "packages/*"
  ]
}

The lerna root package.json:

{
    "name": "monorepo",
    "version": "1.0.0",
    "workspaces": [
        "packages/*"
    ],
    "private": true,
    "scripts": {
        "start": "lerna exec -- start",
    },
    "devDependencies": {
        "lerna": "^2.9.0",
        "concurrently": "3.5.1",
        "eslint": "^4.18.2",
        "eslint-config-airbnb": "16.1.0",
        "eslint-plugin-import": "2.9.0",
        "eslint-plugin-jsx-a11y": "6.0.3",
        "eslint-plugin-react": "7.7.0",
        "fs-extra": "^5.0.0",
        "node-fetch": "^2.1.1",
        "nodemon": "^1.11.0"
      }
}

And my project has the following package.json:

{
  "name": "@monorepo/server",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon --exec \"babel-node start-server.js\""
  },
  "dependencies": {
    "@babel/cli": "^6.24.1",
    "@babel/core": "^6.25.0",
    "@babel/plugin-transform-runtime": "^6.23.0",
    "@babel/preset-env": "^1.6.1",
    "@babel/preset-es2017": "^6.24.1",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.17.2",
    "connect-mongo": "^2.0.0",
    "crypto": "^1.0.1",
    "express": "^4.15.3",
    "express-graphql": "^0.6.12",
    "graphql": "^0.13.1",
    "graphql-relay": "^0.5.4",
    "jwt-simple": "^0.5.1",
    "mongoose": "^5.0.10",
    "morgan": "^1.8.2",
    "nodemailer": "^4.6.0",
    "passport": "^0.4.0",
    "passport-jwt": "^4.0.0",
    "path": "^0.12.7",
    "validator": "^9.1.1"
  },
  "babel": {
    "presets": [
      "@babel/es2017",
      "@babel/preset-env"
    ],
    "plugins": [
      "transform-runtime"
    ]
  }
}

When I start server, it is not finding the loaders locally. I assume this is because all babel is installed in the monorepo/node_modules:

yarn server
yarn run v1.5.1
$ lerna exec --scope @amplifactory/server -- nodemon --exec "babel-node start-server.js
lerna info version 2.9.0
lerna info scope @amplifactory/server
[nodemon] 1.17.2
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `babel-node start-server.js`
D:\monorepo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:328
        throw e;
        ^

Error: Couldn't find preset "@babel/es2017" relative to directory "D:\\9. DEV\\WORKSPACE\\amplifactory\\packages\\server"
    at D:\monorepo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
    at Array.map (native)
    at OptionManager.resolvePresets (D:\monorepo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (D:\monorepo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (D:\monorepo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (D:\monorepo\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at compile (D:\monorepo\node_modules\babel-register\lib\node.js:103:45)
    at loader (D:\monorepo\node_modules\babel-register\lib\node.js:144:14)
    at Object.require.extensions.(anonymous function) [as .js] (D:\monorepo\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:487:32)
[nodemon] app crashed - waiting for file changes before starting...

How can I solve that? How to configure server to look at the monorepo babel and solve that error?

Answer 1

Your Babel dependencies should be installed at the root package.json (since they will be shared across all packages).

yarn add --dev -W @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-es2017"

The -W flag tells Yarn Workspaces to install at the root level. Then, you would also move your Babel configuration from inside the packages to the root. I would recommend breaking the config out of the package.json and into it's own babel.config.js file.

Here's a completed Monorepo example using Babel 7 with Lerna and Yarn Workspaces. Hope this helps!