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.