Webpack issue while using react-infinite-carousel about react-infinite-carousel

[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']
            }
        ]
}