带有 babel-loader 的 Webpack 无法解析反应功能组件答案

【问题标题】：Webpack with babel-loader not able to parse react function component带有 babel-loader 的 Webpack 无法解析反应功能组件
【发布时间】：2020-10-08 07:04:08
【问题描述】：

我正在进行一个巨大的项目重构，我必须升级一堆库，但是每当我尝试使用 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

原来它与我配置的babel-loader配置有关：

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

还有babel.config.json：

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

}

一开始我以为是不同的 babel 文件配置有问题。我首先尝试使用 .babelrc 但文档指出仅适用于单文件项目配置而不是 babel.config.json 可以管理的宽项目配置，但事实证明这适用于所有根文件，但不适用于 node_modules 中的文件。我不知道我会遗漏什么，也不知道 babel 如何真正应用规则来监视要解析和转译的文件。

谁能给我点光？

谢谢！

【问题讨论】：

你能分享你的 babel 和 react 版本吗？
当然，这些是我得到的版本：@babel/core: 7.11.6 @babel/preset-env: 7.11.5 @babel/preset-react: 7.0.0 react: 16.13。 1个通天塔加载器：8.0.6
我猜sequoia-react-component-library 有一些未转译的 jsx。并且由于您排除了所有 node_modules 它没有被转换。
尝试将您的文件扩展名更改为.js，暂时为我修复了它

标签： javascript reactjs webpack babeljs

【解决方案1】：

试试这个：

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

由于损坏的文件位于节点模块内，请尝试注释排除，这也应该转译那些反应文件。

【讨论】：