Strange behaviour when using webpack-stream with gulp

Question

I've run into an issue whilst loosely following along the gulp, webpack(stream) examples, where I'm getting this strange error:

node_modules\webpack-stream\node_modules\webpack\lib\ProgressPlugin.js:12

const defaultHandler = (percentage, msg, ...args) => {
                                             ^^^
SyntaxError: Unexpected token ...
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:\code\node_modules\webpack-stream\index.js:10:22)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)

I've got a basic gulpfile in the root of my project with this code:

const gulp = require("gulp");
const ts = require("gulp-typescript");
const concat = require("gulp-concat"); 
const named = require("vinyl-named");
const webpack = require("webpack-stream");

var fmProject = ts.createProject("scripts/fortress/typescript/filemanager/tsconfig.json");


gulp.task("filemanager:watch", function() {
    return fmProject.src()
        .pipe(named())
        .pipe(webpack(require("./webpack.config.js")))
        .pipe(fmProject())
        .pipe(gulp.dest("scripts/fortress/react-components/transpiled-components/filemanager/"));
});

The tsconfig file works fine in a separate task (that doesn't use webpack or vinyl).

I'm expecting this gulp-file to hook on to the tsconfig file and transpile some .tsx (typescript-react) code into .js code with the vinyl-named module. This as I want to have separate tasks for separate react components (not a big bundle of all of my files).

My webpack.config.js file:

module.exports = { 

    devtool: "source-map",

    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
}

Strangely enough the gulpfile compiles fine when I remove the reference to either webpack-stream. However, it can't run the task...

Does anyone know how I can get this working?

Strange behaviour when using webpack-stream with gulp

0 Answers0