No loaders configured for node_modules | webpack + babel

Question

I am trying to load a JSX Component from a module declared as a devDependency in my project. However, upon running webpack, I get the below error:

Module parse failed: Unexpected token (70:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. 

|
|                 render(
>                     <Provider store={store}>
|                         <MyApp />
|                     </Provider>,
 @ ./src/App.js 48:43-96
 @ ./src/index.js

I am using webpack 4 and babel 7.

webpack dependencies:

"devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "dummy-pkg": "file:../dummy-pkg",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.2",
    "sass-loader": "^8.0.0",
    "style-loader": "^0.16.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.10"
}

webpack config:

module: {
    rules: [
        {
            test: /\.jsx?$/,
            include: [path.resolve(__dirname, './src'), /node_modules\/dummy-pkg/],
            use: 'babel-loader'
        },
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }
    ]
 }

babelrc

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

When I try to import the Component from dummy-pkg, it fails with the error message that I have mentioned above.

If I remove the import, all the other JSX components that have been declared within my current project are transpiled correctly. Introducing this causes all the problems.

I have been looking at a lot of other questions on Stack Overflow as well as some GitHub issues. The solutions suggested there do not seem to work out for me.

Any help would be really appreciated. TIA!

UPDATE

After some more debugging, I found that you need to define the babel config in babel.config.json

More info available here. Other File types are listed here

Answer 1

Surprisingly what I have noticed is that when you are providing the presets in .babelrc it's not working if there's anything that you want exclude from node_modules but when I placed the presets in my webpack.config it worked like gem. So I would suggest to try keeping the rule for js or jsx like below and test

{
    test: /\.(js|jsx)$/,
    exclude: [/node_modules\/dummy-pkg/],
    use: {
      loader: "babel-loader",
      options: {
         presets: ["@babel/preset-env", "@babel/preset-react"],
         plugins: [
           "@babel/plugin-proposal-class-properties"
         ]
       }
    }
}

Hope this helps.