Use babel, webpack, react in a mono repo setup without lerna or yarn

Viewed 746

i'm trying to create a mono repo setup with webpack and babel to bundle multiple react apps that share some code. I would like to avoid lerna because of unnecessary overhead and unresolved problems with package-locks and npm audit. I have the following structure (sources can be found here):

├── app
│   ├── babel.config.json
│   ├── package.json
│   ├── src
│   │   └── index.js
│   └── webpack.config.js
├── babel.config.json
└── components
    ├── babel.config.json
    └── my-component.js

the babel.config.js files in app and components looks as follows:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

the root babel.config.js looks as follows:

{
  "babelrcRoots": ["./app", "./components"]
}

and finally the webpack.config.js:

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            rootMode: "upward",
          },
        },
      },
    ],
  },
};

Now my problem is that webpack fails with an error stating that it cant resolve react in ./components/my-component.js. It seems webpack/babel treats components as a seperate project which has its own dependencies. What i want is to use components just as an additional source folder.

Is there a solution without lerna/yarn workspaces for this problem?

Thanks.

0 Answers
Related