Copying from the Babel documentation:
[...] if you are running your Babel compilation process from within a subpackage, you need to tell Babel where to look for the config. There are a few ways to do that, but the recommended way is the "rootMode" option with "upward", which will make Babel search from the working directory upward looking for your babel.config.json file, and will use its location as the "root" value.
Setting babelUpwardRootMode
to true
in your project.json
will set rootMode
option to upward
in the Babel config. You may want the upward
mode in a monorepo when projects must apply their individual .babelrc
file. We recommend that you don't set it at all, so it will use the default to false
as the upward
mode brings additional complexity to the build process.
"my-app": {
"targets": {
"build": {
"executor": "@nx/webpack:webpack",
"options": {
"webpackConfig": "apps/my-app/webpack.config.js",
"babelUpwardRootMode": true
}
},
}
}
When babelUpwardRootMode
is true
, Babel will look for a root babel.config.json
at the root of the workspace, which should look something like this to include all packages:
{ "babelrcRoots": ["*"] }
Then for each package, you must have a .babelrc
file that will be applied to that package. For example:
{
"presets": ["@babel/preset-env", "@babel/preset-typescript"]
}
All packages will use its own .babelrc
file, thus you must ensure the right presets and plugins are set in each config file. This behavior can lead to build discrepancies between packages, so we recommend that you don't set babelUpwardRootMode
at all.
โโโ apps
โ โโโ demo
โ โโโ .babelrc
โโโ libs
โ โโโ a
โ โ โโโ .babelrc
โ โโโ b
โ โโโ .babelrc
โโโ babel.config.json
In workspace above, if demo
imports a
and b
, it will apply the config libs/a/.babelrc
and libs/b/.babelrc
to the respective packages and not apply its own apps/demo/.babelrc
to a
and b
. Anything in babel.config.json
will apply to all packages.