Where to put babel setting in lerna setup as it is not recognizing jsx code in shared code directory

Question

I have used lerna to setup the repo. This is the error I am getting -

This error is coming in the shared code which I have put in the components directory. Below is my directory structure.

So I have this Button component to be used in both the apps. After seeing the error it seems to me it's not recognizing the jsx syntax and asking for @babel/preset-react . So what I tried is I tried to create .babelrc file inside buttons folder with this content -

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

and then additionaly I also created one webpack.config.js file inside buttons folder with this content -

module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        }
      ]
    }
}  

This doesn't helped me! I also tried to create babel.config.js in the root folder with a few contents copied but it didn't work. I have separate .babelrc and webpack.config.js files in both the apps inside the apps folder as shown in the snapshot. When I am using buttons as a dependency in package.json in apps and then using it, then this error is coming. I don't know how to resolve this issue. Any help will be greatly appreciated. This is example repo I have created for reference

Answer 1

One way to get this to work might be to nail the babel config straight into the webpack configuration:

In your case you have to change the babel-loader config so it will look like that:

{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader",
      options: {
        presets: [
          "@babel/preset-react",
        ],
      }
    }
  },

I just tried it on your test repo for app2 and it works