Webpack Unexpected token <

Question

I use webpack and react in this project, and I want to import react-paginator in my project, but I get an error when I bundle front-end code.

I guess webpack did not parse the jsx code under node_modules folder, but I have no ideas how to solve......

---

error:

ERROR in ./~/react-paginator/index.js
Module parse failed: /home/kang/Desktop/doing/match-platform/node_modules/react-paginator/index.js Line 109: Unexpected token <
You may need an appropriate loader to handle this file type.

webpack config:

var webpack = require('webpack');

module.exports = {
    entry: {
        root: './src/front_end/scripts/root_container.js',
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets:['es2015', 'react']
            }
        }, {
            test: /\.json$/,
            loader: 'json'
        }]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    output: {
        path: './src/front_end/dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'root.jQuery': 'jquery',
            'Promise': 'exports?global.Promise!es6-promise',
            'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch',
        }),
        new webpack.DefinePlugin({
            "require.specified": "require.resolve"
        }),
    ]
};

Answer 1

The problem is that react-paginator's source hasn't been precompiled to a format that would work out of box. It still contains JSX. That's why the code fails for you.

To solve this you will have to compile the code yourself. You could try to add an include like this to your jsx loader definition:

include: path.join(__dirname, 'node_modules/react-paginator')

This should help webpack to compile the file for you.

---

On a related note I've developed an alternative component you could look into. See react-pagify. It should work without any fiddling on your part. It's more complicated to use by design, though.