时间戳

首页 > 解决方案 > 带有 babel-loader 的 Webpack 无法解析反应功能组件

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

问题描述

我正在进行一个巨大的项目重构，我必须升级一堆库，但是每当我尝试使用 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 如何真正应用规则来监视要解析和转译的文件。

谁能给我一些光明？

谢谢！

标签： javascriptreactjswebpackbabeljs

解决方案

尝试这个：

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

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

推荐阅读