Webpack 无法加载高阶组件？

Question

我创建了一个如下所示的高阶组件：

import * as React from 'react'

export const ForceMobileHOC = WrappedComponent => {
  return class extends React.Component {
    constructor(props) {
      super(props)
    }

    render() {
      return (
        <WrappedComponent {...this.props} />
      )
    }
  }
}

但是 webpack 报错：

Module parse failed: Unexpected token (45:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|     render() {
>       return <WrappedComponent {...this.props} />
|     }
|   }

这是相关的 Webpack 配置：

module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /core-js/,
        query: {
          cacheDirectory: './webpack_cache/'
        }
      }
    ]
  }

我以前制作过 HOC，但从未运行变成这样的东西。可能发生了什么？

Answer 1

是进口的。我试图导入 ForceMobileHOC.JS 而不是 ForceMobileHOC.js。不确定为什么错误看起来像它那样，但这就是解决方案。

Webpack 无法加载高阶组件？

Webpack can't load Higher Order Component?

javascript

reactjs

higher-order-components