Module build failed: SyntaxError: Unexpected token with babel-plugin-transform-vue-jsx

Question

UPDATE: vue-tables-2 is now served pre-compiled, so no loaders are needed. For the templates option it is recommended to use scoped slots, which also don't require any special settings

I am trying to migrate to Vue 2 and for this I need to use the vue-tables-2 component. I am using Laravel Elixir with webpack to compile my Vue projects. I followed the instructions and installed babel-plugin-transform-vue-jsx and its dependencies and create the .babelrc at the same level as the main script. The below error is displayed :

Error: ./~/vue-tables-2/lib/template.jsx Module build failed: SyntaxError: Unexpected token (15:7)

The corresponding character is <

Small precision, I added this line to the webpack configuration:

{ test: /\.jsx?$/, loader: 'babel' }

Do you have any advice ?

Thanks

Answer 1

Faced the same issue, just put webpack configuration on gulpfile.js

elixir((mix) => {
    Elixir.webpack.mergeConfig({
        module: {
            loaders: [{
                test: /\.jsx?$/,
                loader: 'babel',
                exclude: /node_modules(?!\/(vue-tables-2|vue-pagination-2))/
            }]
        }
    });

    mix.sass('app.scss')
       .webpack('app.js');
});