Webpack with babel-loader not able to parse react function component

Question

I'm in the middle of a huge project refactor which I have to upgrade a bunch of libraries however I'm struggling with an error whenever I try to compile the project with webpack:

ERROR in ./node_modules/sequoia-react-component-library/src/containers/ConnectedSignIn/index.js 12:31
Module parse failed: Unexpected token (12:31)
File was processed with these loaders:
* ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| // eslint-disable-next-line react/prop-types
> const errorWrapper = props => (<div className='errors'>{ props.children }</div>);
| 
| const getValidityClass = ({ fieldValue }) => {
@ ./src/views/sign-in/sign-in.js 34:0-93 70:46-61
@ ./src/views/sign-in/index.js
@ ./src/App.js
@ ./src/loader.js
@ ./src/index.js
@ multi ./src/index.js

So it turns out that it has to do with the babel-loader configuration which I have configured as follows:

      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },

And babel.config.json :

{
    "presets": [
      "@babel/preset-env", 
      "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-proposal-class-properties"]

}

I thought at first it was a problem with the different babel files configuration. I tried first with .babelrc but the doc states that only works for single file project configurations rather than wide projects configuration which babel.config.json can manage it but it turns out that works pretty good with all the root files but not the ones placed within node_modules . I don't know what could I missing and I don't know how really babel apply the rules in term to watch for the files to parse and transpile.

Someone who could throw me some light?

Thanks!

Answer 1

Try this:

{
  test: /.(js|jsx)$/,
  /* removed exclude: /node_modules/, */
  loader: "babel-loader"
},

Since the broken file is inside a node module, try commenting the exclude and that should transpile those react files as well.