CODEWITHSUNDEEP
javascriptreactjsheatmap
Will
Will

Reputation: 782

React component failed to compile - may need appropriate loader

I've created a component that was working perfectly, until I published it to npm and installed into my App. I cannot figure out what the problem is, the error is:

../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)}

This is the repository https://github.com/willfretwell/heatmap-calendar-react.

To install npm i heatmap-calendar-react.

Any help is very much appreciated.

Upvotes: 0

Views: 408

Answers (2)

Christian Bartram
Christian Bartram

Reputation: 411

Its definitely an issue in your Webpack configuration this is a basic Webpack configuration file for 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'
  }
};

Its also very important that you include a .babelrc file in the root of your project so that it knows to transform your react code. Your .babelrc file can look something like this

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

Lastly make sure you install all the dependencies required npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-stage-2 babel-preset-react

Hope this helps!

Upvotes: 1

Shyam Kumar
Shyam Kumar

Reputation: 158

It might be the issue with webpack file. Please provide appropriate loader in webpack.config.js file for all the files that you have included in the component.

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]"
        } 
    ]

Upvotes: 0

Related Questions