How to show webpack errors in gulp

user_89706 0
Viewed 1597

I have a TypeScript project that is transpiled with webpack, and the build tasks are driven by gulp. Take this simple task to demonstrate my question:

var webpack = require('webpack');
var webpackStream = require("webpack-stream");

gulp.task("check", function() {
        return gulp.src("*")
            .pipe(webpackStream(require("./webpack.config.js"), webpack))
            .pipe(gulp.dest(OUTPUT_DIR));
    }
);

Now when all is well, gulp check works fine. Now suppose I made some coding error - this gulp task would emit:

[10:20:02] Starting 'check'...
[hardsource:chrome] Tracking node dependencies with: yarn.lock.
[hardsource:chrome] Reading from cache chrome...
(node:20232) UnhandledPromiseRejectionWarning
(node:20232) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:20232) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[10:20:08] The following tasks did not complete: check
[10:20:08] Did you forget to signal async completion?

Which is very uninformative. If I remove .pipe(gulp.dest(OUTPUT_DIR)); from the check task, I get the original error message. For example:

[10:35:42] Starting 'check'...
[hardsource:chrome] Tracking node dependencies with: yarn.lock.
[hardsource:chrome] Reading from cache chrome...
[10:35:48] 'check' errored after 5.96 s
[10:35:48] Error in plugin "webpack-stream"
Message:
    ./myfile.ts
Module build failed: Error: Typescript emitted no output for C:\Projects\myfile.ts.
    at successLoader (C:\Projects\***\node_modules\ts-loader\dist\index.js:41:15)
    at Object.loader (C:\Projects\***\node_modules\ts-loader\dist\index.js:21:12)
 @ ./src/background/background.ts 16:25-54
 @ multi ./src/background/backgroundC:\Projects\***\src\myfile.ts
./src/myfile.ts
[tsl] ERROR in C:\Projects\***\src\myfile.ts(305,28)
      TS2345: Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
  Type 'undefined' is not assignable to type 'number'.
Details:
    domainEmitter: [object Object]
    domain: [object Object]
    domainThrown: false

Adding pipes to gulp-load-plugins.logger either before or after the webpackStream doesn't help. Can I pipe the gulp stream to a gulp.dest, and still get the informative webpack error messages? How?

gulp webpack typescript
2 Answers

I had this happen even without hard-source-webpack-plugin. It seems to be a problem with webpack-stream itself: https://github.com/shama/webpack-stream/issues/34

Instead of:

.pipe(webpackStream(require("./webpack.config.js"), webpack))
.pipe(gulp.dest(OUTPUT_DIR));

Add an error handler to the webpackStream pipe:

.pipe(webpackStream(require("./webpack.config.js"), webpack))
    .on('error',function (err) {
      console.error('WEBPACK ERROR', err);
      this.emit('end'); // Don't stop the rest of the task
    })
.pipe(gulp.dest(OUTPUT_DIR));
user_17373130

I'm posting the solution instead of deleting the question, in case it's of use to someone in the future.

In our case the problem turned out to be usage of a webpack build accelerator called hard-source-webpack-plugin. Apparently it's a known issue - and the github link includes a potential workaround.

user_897060
Related