1

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'm using gulp, webpack, and the babel-loader to build some files (vue-tables-2):

gulp.task('scripts-vue-tables', function() {
    gulp.src('node_modules/vue-tables-2/index.js')
        .pipe(webpackstream({
                output: {
                    path: __dirname,
                    filename: "vue-tables-2.js",
                    library: 'VueTables2',
                    libraryTarget: 'var'
                }
            }
        ))
        .pipe(gulp.dest('public/vendor/vue-tables-2/js/'));
}

In webpack.config.js I have included:

loaders: [
        {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            query: {
                presets: ["latest", "react", "stage-0"],
                plugins: ["transform-vue-jsx"]
            }
        },
    ]

And included the same in .babelrc:

{
  "presets": ["latest", "react", "stage-0"],
  "plugins": ["transform-vue-jsx"]
}

But, running the scripts-vue-tables task yields the error:

Module parse failed: \node_modules\vue-tables-2\lib\template.jsx Unexpected token (15:7)
You may need an appropriate loader to handle this file type.

Note: In general, I have tried to follow the steps outlined here.

Matanya
  • 6,233
  • 9
  • 47
  • 80
asemahle
  • 20,235
  • 4
  • 40
  • 38
  • 1
    Are you sure `webpackstream` will attempt to read `webpack.config.js`? I'd have expected you to have that config inside your gulp task. – loganfsmyth Nov 11 '16 at 00:26
  • Thanks! If you turn this comment into an answer, I will mark it as the solution – asemahle Nov 11 '16 at 02:52

1 Answers1

2

webpack.config.js is the file read if you use the webpack CLI interface, but in your Gulp example usecase, it will not be used. You'd probably want something like

    .pipe(webpackstream(Object.assign({
        output: {
            path: __dirname,
            filename: "vue-tables-2.js",
            library: 'VueTables2',
            libraryTarget: 'var'
        },
    }, require('./webpack.config')))

to load both the Webpack configuration and the special output logic.

loganfsmyth
  • 156,129
  • 30
  • 331
  • 251
  • 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. – Matanya Dec 06 '17 at 08:27