typeof statsOptions.colors ... Cannot read property 'colors' of undefined

[uinika]

• Operating System:
• Node Version:
• NPM Version:
• webpack Version:
• webpack-dev-middleware Version:

Expected Behavior

webpack built 4333dbf8aa8a0bbf4aab in 13716ms
C:\Workspace\gd-diy-apply\node_modules\webpack-dev-middleware\dist\utils\setupHooks.js:68
} else if (typeof statsOptions.colors === 'undefined' || typeof statsOptions === 'string') {
^

TypeError: Cannot read property 'colors' of undefined
at C:\Workspace\gd-diy-apply\node_modules\webpack-dev-middleware\dist\utils\setupHooks.js:68:38
at processTicksAndRejections (internal/process/task_queues.js:75:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: node ./config/command/start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\zhenghang\AppData\Roaming\npm-cache_logs\2021-01-13T06_27_35_802Z-debug.log

Actual Behavior

Code

// webpack.config.js
// If your code blocks are over 20 lines, please paste a link to a gist
// (https://gist.github.com).

// additional code, HEY YO remove this block if you don't need it

How Do We Reproduce?

[AviVahl]

same here, when using webpack@4 (works with webpack@5).

[alexander-akait]

Somebody can create example?

[alexander-akait]

@AviVahl I have added tests for webpack@4, but all fine 😕

[AviVahl]

Debugged to see what's happening during compilation.
compiler.options is defined. compiler.options.stats is not. This is causing statsOptions === undefined making statsOptions.colors blow up.
I'll try to create a reproduction.

[AviVahl]

mkdir issue-test
cd issue-test
npm init -y
npm i webpack@4 webpack-dev-middleware express

Now take code from readme and save as a.js:

const webpack = require('webpack');
const middleware = require('webpack-dev-middleware');
const compiler = webpack({
  // webpack options
});
const express = require('express');
const app = express();

app.use(
  middleware(compiler, {
    // webpack-dev-middleware options
  })
);

app.listen(3000, () => console.log('Example app listening on port 3000!'));

node a.js -> error occurs.

[alexander-akait]

Yep, already found bug, WIP on this, anyway thanks for reproducible test repo, patch/release will be in near future

[alexander-akait]

Please try https://github.com/webpack/webpack-dev-middleware/releases/tag/v4.0.4, I added all cases for stats, should be never broken again, I hope 😄

[AviVahl]

Works on my end. Thanks! 👍