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文件的问题。请在 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]"
        } 
    ]

Answer 2

这绝对是您的 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

希望对您有所帮助！

React 组件编译失败 - 可能需要合适的加载器

React component failed to compile - may need appropriate loader

javascript

heatmap

reactjs