I have a monorepo, using yarn 2.4, webpack and babel and a top level babel.config.json, with the following folder structure (slightly simplified)
|-- .yarn
|-- package.json (top-level)
|-- babel.config.json
|-- tsconfig.json
|-- /* other config files... /
|-- modules
| |-- build
| | |-- build-system
| | | |-- package.json (module-level)
| | | |-- entry.js
| | | |-- webpack.js
| | | |-- /* source... */
| |-- /* other module folders... */
I've changed my webpack rule for ts/js files to the following:
{
test: /\.(j|t)sx?$/,
use: {
loader: "babel-loader",
options: {
babelrcRoots: ['../..'],
rootMode: 'upward',
},
}
}
Top-level package.json
{
"name": "workspace-example",
"version": "0.0.1",
"workspaces": [
"modules/build/*"
]
}
Module-level package.json
{
"name": "@workspace-example/build-system",
"version": "0.0.1",
"dependencies": {
"@babel/core": "^7.14.5",
"@babel/plugin-transform-runtime": "^7.14.5",
"@babel/preset-env": "^7.14.5",
"@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.14.5",
"@babel/runtime-corejs3": "^7.14.5",
"babel-loader": "^8.2.2",
"html-loader": "^2.1.2",
"pnp-webpack-plugin": "^1.6.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"typescript": "^4.3.2",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"build": "webpack --config source/webpack/webpack.js"
}
}
This seems to correctly make it load the top-level babel.config.json, however now when running a build it's looking in the top-level package.json for dependencies, when they're at the module-level package.json, so it fails with the following error:
Module build failed (from ../../../.yarn/$$virtual/babel-loader-virtual-7dc78877af/0/cache/babel-loader-npm-8.2.2-b4e600c2c5-362bb71573.zip/node_modules/babel-loader/lib/index.js):
Error: Your application tried to access @babel/plugin-transform-runtime, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.
Required package: @babel/plugin-transform-runtime (via "@babel\plugin-transform-runtime")
Required by: C:\code\webpack-5-yarn\
These dependenceies are defined in the module-level package.json but it is looking at the top-level package.json when I don't believe it should be.
Moving the top-level babel.config.json to .babelrc in the build-system module and removing the two options from the babel loader rule works (for some reason keeping the name babel.config.json doesn't work). But I'm looking for a solution which can use a single top-level babel.config.json.
I have the same solution working with webpack 4 and yarn 1 without issue.
Edit:
Upon using .babelrc in the module directory, I can remove all dependencies from the module-level package.json and not get the error Error: Your application tried to access @babel/plugin-transform-runtime, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.
Not sure why I wouldn't be when I think it should be the same issue.
Edit 2: I seem to have it partially working by removing the babel.config.json file completely and just adding the configuration directly into the webpack file like so:
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
root,
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
],
plugins: [
[
"@babel/plugin-transform-runtime",
{
regenerator: true,
corejs: 3
}
]
]
},
}
}