Errors in `webpack` break the pipe / task

[ArnaudRinquin]

Hello,

I am using webpack and gulp to build a coffee-script app using webpack watch option.

Any coffee-loader error, such as a syntax error, will just crash webpack along with gulp.

Using plumber or anything to catch the error will prevent gulp from crashing but won't keep webpack alive.

How can we fix that?

[shama]

I'm not sure. I don't use plumber or the watch option with webpack.

[shama]

Closing as I don't think this is an issue with this task. If it is, let me know when an example that reproduces. Thanks!

[jeffijoe]

I have the same problem.

[shama]

If it is, let me know when an example that reproduces. Thanks!

[jeffijoe]

I found that I had bail:true, setting it to false fixed it. Atleast for syntax errors.

[aldendaniels]

@ArnaudRinquin - Ran into this same issue. It's a gulp issue I think. There's a good explanation in https://github.com/gulpjs/gulp/issues/259. The following worked for me:

  return gulp.src('webclient/index.js')
    .pipe(gulpWebpack(webpackConfig, webpack))
    .on('error', function handleError() {
      this.emit('end'); // Recover from errors
    })
    .pipe(gulp.dest('webclient-dist/static'));

[aldendaniels]

@shama - You might want to consider re-opening this as a documentation issue. Anyone using the watch option will need an .on('error', ...) handler.

[nidu]

@aldendaniels is everything ok after recovering? For me gulp is recovering well, watches and compiles files (judging by logs) but doesn't overwrite result files.

[aldendaniels]

@nidu - sorry for not getting back. I'm no longer using webpack-stream, but as I recall everything worked well so long as an .on('error', ...) handler was specified.

[gkiely]

For anyone looking at patching this, the issue seems to be on line:117 in index.js

Replacing self.emit('error', new gutil.PluginError('webpack-stream', errorMessage)); with console.error(errorMessage, "\x07");

Seems to fix it but i'm sure there is a better approach.

[krzysieki]

Really annoying issue. I knew that some time ago there was no such a problem and after some research found that in webpack-stream@2.1.1 it is working correctly.

So for me downgrading resolved issue and webpack-stream@2.1.1 compiles typescript and does not crash on errors, but it is sad that newer versions cant handle errors correctly

[kmck]

I'm having this problem as well. Working around it with .on(error, function() { ... }) for now, but out-of-the-box compatibility with plumber would be way nicer.

[CezaryDanielNowak]

I fixed it by changing:

  gulp.src('app.js')
  .pipe(webpack(webpackConfig, webpackSync, webpackCallback))
  .on('error', (err) => {
    gutil.log('WEBPACK ERROR', err);
  })
  .pipe(gulp.dest('dest/'));

into:

  gulp.src('app.js')
  .pipe(
    webpack(webpackConfig, webpackSync, webpackCallback)
    .on('error', (err) => {
      gutil.log('WEBPACK ERROR', err);
    })
  )
  .pipe(gulp.dest('dest/'));

[gregorskii]

+1 to @CezaryDanielNowak using .on right after the webpack-stream will allow the error to trigger but resume the watch process. Just make sure you emit and end from the catch:

gulp.task('webpack', () => {

    return gulp.src(config.webpack.paths)
        .pipe(plugins.vinylNamed())
        .pipe(plugins.webpackStream(webpackConfig))
        .on('error', function(error) {
            plugins.util.log(plugins.util.colors.red(error.message));
            this.emit('end');
        })       
        .pipe(gulp.dest(config.dist + '/scripts'))
    ;
});

note the use of a normal function there, its to keep scope on this when running this.emit('end') using an arrow function in the .on('error') callback will break the scope of this due to lexical scoping.

[krzysieki]

After some debugging it seems that, in my setup, problem is not caused by #115 but it occurs because webpack-stream calls:

self.emit('error', new gutil.PluginError ...

two times.

After changing second "self.emit('error', new ..... " to simple log(errorMessage) everything works ok.

I suppose that error should be emitted once.

[TomaszScisloGS]

I'm facing the same issue. Is there any other solution than downgrade to 2.1.1?

[zaqqaz]

Also had problem with this. (https://github.com/shama/webpack-stream/issues/18#issuecomment-220851827)

Think, not necessary emit error in watch mode.

Code below NOT working in my case, watch stiil work ok, webpack also, but pipes below(like uglify and dest) not.

.pipe(plugins.webpackStream(webpackConfig))
 .on('error', function(error) {
            plugins.util.log(plugins.util.colors.red(error.message));
            this.emit('end');
        })       

[headfire94]

I'm facing the same issue

[girishla]

Same issue here

[nicholasrq]

@gregorskii works like a charm for me

[krzysieki]

On my setup @gregorskii 's code is still not working.

@nicholasrq:

• try to write some code with error
• browser refreshes and in console we have our error
• try to fix that error
• browser refreshes, but wait - error still exists, code was not refreshed

So webpack-stream didnt crash but it didnt refresh code too

[DmitryMasley]

@krzysieki the same problem for me.

[Munsen]

I have same problem I solved this problem like this:

webpack-stream/index.js:131

    var compiler = webpack(config, function (err, stats) {
      if (err) {
        if (this.watcher) this.watcher.close();
        self.emit('error', new gutil.PluginError('webpack-stream', err));
      }
      var jsonStats = stats.toJson() || {};
      var errors = jsonStats.errors || [];

gulpfiles.js

function webpackError() {
  this.emit('end');
}

var stream = webpackStream(webpackConfig);
gulp.task('webpack', (f) => {
  return gulp.src(assets_path)
    .pipe(named((f) => {
      var match = /(.+)\.(.+)$/.exec(f.relative);
      return match[1];
    }))
    .pipe(stream)
    .on('error', webpackError)
    .pipe(gulp.dest(assets_output));
});

gulp.watch(assets_path, ['webpack']);

It just stop watch and rerun pipe if it broken.

I think webpack-stream should be not break pipe in watch mode. so above code is temporary solution.

[alexbassy]

I have the same problem as @krzysieki

-> Save, webpack compiles fine -> Save with a syntax error, webpack outputs error, "Cannot find module" error in browser -> Fix error, save, webpack says it's compiled fine, but file is not updated and missing module error persists

So basically the watch works fine as long as I never save with an error. If I do, I have to relaunch the gulp script.

[ennovum]

+1

[jeroennoten]

With a little help of @gkiely's comment, I found the root of the problem:

• When a compilation error occurs,
• webpack-stream emits an error event.
• Node listens for stream error events
• and removes the ondata handler.
• Therefore, it stops writing data to the destination after an error event has occurred.

To solve this issue, webpack-stream should not emit an error event on compilation error. At least not when watching. PR #126 should solve this.

[kmck]

I just tested the patch in https://github.com/shama/webpack-stream/pull/126 and it takes care of the issue while running the watcher nicely!

@shama could you please merge it and update the npm package?

[TSMMark]

126 did not help me. Exact same problem: files are never written after an error.

[justinmchase]

@TSMMark How could the files be written if there was an error? You have to have a successful parse to be able to emit a file.

What you want is for the watch to not be broken when you have a parse error, but to instead see the error in console output. Then you fix the error, and the following compilation will be successful and the file will be written.

[TSMMark]

I meant subsequent builds in my watch task. If it errored one time I would have to terminate the watch and start it over.

To fix use "webpack-stream": "github:jeroennoten/webpack-stream#patch-1"

[B3none]

return gulp.src(paths.scripts.src, {sourcemaps: true})
    .pipe(
      webpack(webpackConfig)
        .on('error', (err) => {
          console.log(err.message);
          this.emit('end'); // Recover from errors
        })
    );