Displaying webpack errors within gulp is a simple process

Question

Displaying webpack errors within gulp is a simple process

My TypeScript project utilizes webpack for transpilation, and gulp for managing build tasks. Let's consider this simple task to illustrate my query:

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));
    }
);

When everything is functioning correctly, gulp check runs smoothly. However, if I introduce a coding error, the gulp task generates an unhelpful message:

[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?

This error message lacks information. If I remove .pipe(gulp.dest(OUTPUT_DIR)); from the check task, the original error message surfaces:

[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 before or after webpackStream does not resolve the issue. Is there a way to pipe the gulp stream to gulp.dest and still receive informative webpack error messages? How can this be achieved?

typescript webpack gulp

Answer 1

Answer №1

This issue persisted even in the absence of the hard-source-webpack-plugin. It appears to be a glitch specifically related to webpack-stream itself: https://github.com/shama/webpack-stream/issues/34

Instead of following the usual pattern:

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

You can resolve this by incorporating an error handler into the webpackStream pipe:

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

Answer 2

This issue persisted even in the absence of the hard-source-webpack-plugin. It appears to be a glitch specifically related to webpack-stream itself: https://github.com/shama/webpack-stream/issues/34

Instead of following the usual pattern:

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

You can resolve this by incorporating an error handler into the webpackStream pipe:

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

Answer 3

Answer №2

I have decided to share the solution instead of removing the question, as it may be beneficial to someone in the future.

After investigating, we discovered that the problem was caused by our use of a webpack build optimizer known as hard-source-webpack-plugin. It seems that this is a well-known issue, and there is a potential workaround provided in the linked GitHub page.

Answer 4

I have decided to share the solution instead of removing the question, as it may be beneficial to someone in the future.

After investigating, we discovered that the problem was caused by our use of a webpack build optimizer known as hard-source-webpack-plugin. It seems that this is a well-known issue, and there is a potential workaround provided in the linked GitHub page.

Displaying webpack errors within gulp is a simple process

Answer №1

Answer №2

Similar questions

Breaking up React code within the React.createElement() function

Adding a variable into a sentence

The HTMLInputElement type does not contain a property named 'name'

What is the best way to switch to a different screen in a React Native application?

The first production build generates the bundle code, while all future builds recycle the existing bundle

Setting up raw-loader in Angular 7 for loading text files

Out of the blue, the error message "this.http is not defined" popped up

The global variable in TypeScript is not specified; it is initialized within the declaration `declare global{}`

Building a versatile setting within a child component by incorporating TypeScript and deriving state data from the parent component

Unlock the potential of Angular $http by leveraging TypeScript generics in your web development projects

Sending Functions as Props in React Using Typescript from a Parent Component to a Child Component

No response from NgClass after executing the function

A guide to implementing previousState in React hooks with TypeScript

Triggering blur event manually in Ionic 3

The module 'AppModule' is importing an unexpected value 'AppAsideModule'. To resolve this issue, make sure to include an @NgModule annotation

NgFor displaying only the initial item in the array

Angular does not adhere to globally defined styles

Encountering a Typescript error when trying to pass a function as a prop that returns SX style

Webpack encounters difficulty in mounting Vue components

You cannot assign the "unknown" type to the "boolean" type