Javascript React组件未能编译-可能需要适当的加载程序

我已经创建了一个运行良好的组件，直到我将其发布到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)}

。/node\u模块/heatmap日历react/heatMapGraph.js
模块分析失败：意外令牌（249:23）
您可能需要适当的加载程序来处理此文件类型。
|var _onClick=this.props.onClick | |函数doNothing（）{}；
| 
|返回此值。选择Group（e，day）}

这是存储库

要安装

npm i热图日历react

---

非常感谢您的帮助。

这可能是网页文件的问题。请在webpack.config.js文件中为组件中包含的所有文件提供适当的加载程序

rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
            'css-loader'
        ]
     },
        {
            test: /\.(jpe?g|png|gif|svg)$/i, loader: "url-loader?name=src/images/[name].[ext]"
        } 
    ]

---

这肯定是你的网页配置中的一个问题。这是React的基本网页配置文件

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

文件也非常重要，这样它就知道如何转换代码。您的

.babelrc

文件可能看起来像这样

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

最后，确保安装了所需的所有依赖项

npm安装——保存开发巴别塔核心巴别塔加载器巴别塔预设环境巴别塔预设-stage-2巴别塔预设反应

---

希望这有帮助

谢谢Shyam，我尝试了你的推荐，我仍然得到同样的结果。你能想出其他可能导致这个错误的原因吗？