[...] 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.
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:
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.
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.
Options playground
Try out this interactive editor of the configuration object. Values are validated as you type and hovering over labels will give you more information.
Loading...
Options
main
Required
string
The name of the main entry-point file.
tsConfig
Required
string
The name of the Typescript configuration file.
outputPath
string
The output path of the generated files.
webpackConfig
string
Path to a function which takes a webpack config, some context and returns the resulting webpack config. See https://nx.dev/guides/customize-webpack
Read buildable libraries from source instead of building them separately.
babelUpwardRootMode
boolean
Default: false
Whether to set rootmode to upward. See https://babeljs.io/docs/en/options#rootmode
babelConfig
string
Path to the babel configuration file of your project. If not provided, Nx will default to the .babelrc file at the root of your project. See https://babeljs.io/docs/en/config-files
crossOrigin
string
The crossorigin attribute to use for generated javascript script tags. One of 'none' | 'anonymous' | 'use-credentials'.
compiler
string
Default: babel
Accepted values: babel, swc, tsc
The compiler to use.
commonChunk
boolean
Default: true
Use a separate bundle containing code used across multiple bundles.
deleteOutputPath
boolean
Default: true
Delete the output path before building.
deployUrl
string
URL where the application will be deployed.
externalDependencies
oneOf [string, Array<string>]
Default: all
Dependencies to keep external to the bundle. (all (default), none, or an array of module names)
extractCss
boolean
Default: true
Extract CSS into a .css file.
extractLicenses
boolean
Default: false
Extract all licenses in a separate file, in the case of production builds only.
Generates a package.json and pruned lock file with the project's node_module dependencies populated for installing in a container. If a package.json exists in the project's directory, it will be reused with dependencies populated.
generateIndexHtml
boolean
Default: true
Generates index.html file to the output path. This can be turned off if using a webpack plugin to generate HTML such as html-webpack-plugin.
index
string
HTML File which will be contain the application.
isolatedConfig
boolean
Default: false
Do not apply Nx webpack plugins automatically. Plugins need to be applied in the project's webpack.config.js file (e.g. withNx, withReact, etc.).
memoryLimit
number
Default: 2048
Memory limit for type checking service process in MB.
namedChunks
boolean
Default: true
Names the produced bundles according to their entry file.
outputHashing
string
Default: none
Accepted values: none, all, media, bundles
Define the output filename cache-busting hashing mode.
Set a path to PostCSS config that applies to the app and all libs. Defaults to undefined, which auto-detects postcss.config.js files in each app/lib directory.
runtimeChunk
boolean
Default: true
Use a separate bundle containing the runtime.
sourceMap
oneOf [boolean, string]
Default: true
Output sourcemaps. Use 'hidden' for use with error reporting tools without generating sourcemap comment.