Webpack issue while using react-infinite-carousel

[zoechen799]

Hi!
I'm using react-infinite-carousel in react 0.14.5, I found this issue:

ERROR in ./~/react-infinite-carousel/src/Carousel.js
Module parse failed:
webapp/node_modules/react-infinite-carousel/src/Carousel.js Line 94: Unexpected token <
You may need an appropriate loader to handle this file type.
|
| return (
| <div key={"carouselItem" + (index % (2 * this.getItemsPerSide() + 1 ))} style={itemStyle}>
| {this.props.itemRenderer(index, itemProgress)}
|
@ ./src/containers/Home/Home.js 33:29-63

Can you please help? Thanks!

[zoechen799]

Hi,

I found the solution for this, the root cause is that I'v ignore the js inside node_modules folder. But infinite-carousel is written in jsx and need to be loaded from jsx-loader. So I add special case while loading it.

loaders: [{
test: /.jsx?$/,
loader: 'react-hot-loader!babel-loader',
include: path.join(__dirname, 'src')
}, {

•  test: /.js$/,
  

•  include: path.join(__dirname, 'node_modules/react-infinite-carousel/src'),
  

•  loader: 'jsx-loader'
  

• }, {
  test: /.(ttf|eot|svg|woff)(?v=[0-9].[0-9].[0-9])?$/,
  loader: 'file-loader'
  }, {

[otech47]

Just to give a little cleaner formatting, this is part of my webpack.config.js. I had the first loader in there so I added the second object and that did it. You may have to npm install jsx-loader as well.

module: {
        loaders: [
            {
                test: /\.(js|jsx)?$/,
                include: [
                    path.resolve(__dirname, 'src')
                ],
                loaders: ['babel-loader'],
                exclude: /node_modules/
            },
            {
                test: /.js$/,
                include: [
                    path.join(__dirname, 'node_modules/react-infinite-carousel/src'),
                ],
                loaders: ['jsx-loader']
            }
        ]
}