Yarn 2 monorepo with babel fails to build because of missing dependences, but it's looking at the wrong package.json

Viewed 1240

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
          }
        ]
      ]
    },
  }
}
0 Answers
Related