javascript - React 组件无法编译 - 可能需要适当的加载器

Question

我创建了一个运行完美的组件，直到我将其发布到 npm 并安装到我的应用程序中。我无法弄清楚问题是什么，错误是:

../node_modules/heatmap-calendar-react/heatMapGraph.js
Module parse failed: Unexpected token (249:23)
You may need an appropriate loader to handle this file type.
|                 var _onClick = this.props.onClick || function doNothing() {}; 
| 
|                 return <div 
|                 key={i} 
|                 onMouseOver={(e) => this.selectGroup(e, day)}

这是存储库 https://github.com/willfretwell/heatmap-calendar-react .

安装npm i heatmap-calendar-react。

非常感谢任何帮助。

Answer 1

这绝对是你的 Webpack 配置中的一个问题，这是 React 的基本 Webpack 配置文件

module.exports = {
  entry: [
    './src/index.js'
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist'
  }
};

包含 .babelrc 也非常重要。文件放在项目的根目录中，以便它知道要转换您的 react 代码。您的.babelrc文件可能看起来像这样

{
  "presets": [
    "env",
    "react",
    "stage-2"
  ]
}

最后确保安装了所需的所有依赖项 npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-stage-2 babel-preset-react

希望这有帮助!