Question: --info-verbosity causes error/failure

[domehead100]

Describe the bug

Launched webpack-cli --info-verbosity verbose. Got an error/exit at:

/node_modules/webpack-cli/bin/webpack.js:460
  compiler.hooks.beforeCompile.tap("WebpackInfo", compilation => {

due to the beforeCompile hook being undefined.

What is the current behavior?

Errors if --info-verbosity is used.

To Reproduce

1. Launch webpack-cli with flag --info-verbosity verbose.
2. See webpack exit with error at:

/node_modules/webpack-cli/bin/webpack.js:460
  compiler.hooks.beforeCompile.tap("WebpackInfo", compilation => {

Expected behavior
Expect info-verbosity switch with verbose to cause webpack-cli to display messages before and after compilation that can be used with vscode problem matches to convert errors to "problems" in the UI.

Screenshots

*Please paste the results of webpack-cli info here, and mention other relevant information

System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Binaries:
Node: 8.9.1
Yarn: 1.5.1
npm: 5.6.0
Browsers: {}
npmPackages:
case-sensitive-paths-webpack-plugin:
wanted: ^2.1.2
installed: 2.1.2
copy-webpack-plugin:
wanted: ^4.5.1
installed: 4.5.1
eslint-import-resolver-webpack:
wanted: ^0.10.0
installed: 0.10.0
extract-text-webpack-plugin:
wanted: ^4.0.0-beta.0
installed: 4.0.0-beta.0
fork-ts-checker-webpack-plugin:
wanted: ^0.4.1
installed: 0.4.1
only-if-changed-webpack-plugin:
wanted: 0.0.1
installed: 0.0.1
optimize-css-assets-webpack-plugin:
wanted: ^4.0.1
installed: 4.0.1
uglifyjs-webpack-plugin:
wanted: ^1.2.5
installed: 1.2.5
webpack:
wanted: ^4.8.3
installed: 4.8.3
webpack-bundle-analyzer:
wanted: ^2.13.0
installed: 2.13.0
webpack-cleanup-plugin:
wanted: github:domehead100/webpack-cleanup-plugin
installed: 0.5.2
webpack-cli:
wanted: ^2.1.3
installed: 2.1.3
webpack-dashboard:
wanted: ^1.1.1
installed: 1.1.1
webpack-manifest-plugin:
wanted: ^2.0.2
installed: 2.0.3
webpack-merge:
wanted: ^4.1.2
installed: 4.1.2
webpack-node-externals:
wanted: ^1.7.2
installed: 1.7.2
webpack-runner:
wanted: ^3.0.1
installed: 3.0.1
webpack-shell-plugin:
wanted: ^0.5.0
installed: 0.5.0
webpack-visualizer-plugin:
wanted: ^0.1.11
installed: 0.1.11

Additional context

[evenstensberg]

Yields fine here:

Could you give me a repro, i.e access to your source code? Might be hard to debug.

[evenstensberg]

Friendly ping :)

[jpoppe]

This one gave me a headache, took me a while to find issue but for me this happens when there are multiple targets exported, also when module.exports is an array with one target.

This works with --info-verbosity:

module.exports = webpackConfiguration

This does not work with --info-verbosity:

module.exports = [webpackConfiguration]
module.exports = [webpackConfiguration1, webpackConfiguration2]

[evenstensberg]

I don't think exporting an array of modules is encouraged, one file with a config is considered better

[jpoppe]

@ev1stensberg When you are building an Electron application where you require 2 targets then this is a pretty useful supported feature ;)

[diegocl02]

I got the same problem here, @jpoppe did you use any workaround for it? I want to use the --info-verbosity flag and at the same time I want to have multiple targets exported in my conf file.

[jpoppe]

@diegocl02, no I did not find a work around, I found this issue when I tried to debug another issue I had with Webpack, so I just enabled only one target for debugging so I could use the --info-verbosity flag. But it did not show more then the --verbose flag in the end so I did not spent more time on it.

[evenstensberg]

Could you formulate the error precisely? i.e: info-verbosity doesn't work when exporting multiple configurations.

[jpoppe]

@ev1stensberg: exactly that, I must add that I have only tested with exporting multiple configurations with different targets, electron-main and electron-renderer in my case.

[evenstensberg]

By chance, do you merge configurations at any point?

[domehead100]

Sorry, didn't see the pings.

Our webpack pipeline is a bit convoluted due to the nature of our project. We're porting a largish jQuery app to React, and also we're on .Net/IIS. Part of the jQuery stuff is now built with webpack and then all of the React stuff. We also use the DllPlugin/DllReferencePlugin to build a vendor bundle, but that bundle is built separately via a shell script that serially builds the vendor bundle and then the other bundles.

Our pipeline is basically:

• shell script builds vendor bundle
• shell script build other bundles
  • ./webpack.config.js exports two configs. Let's call them [./jquery-config, ./React/react-config]. So yes we are exporting multiple configs. This is so that we can build both in parallel.
  • ./React/react-config does use merging. There is a common config and then the dev and prod configs use the common config as a base and use webpack-merge to add/change the common config as needed.

I'd like to help. I'll try to put together a minimalist setup that reproduces the issue.

My main reason for wanting to use info-verbosity is to use the webpack console output with a problem matcher in vscode (Visual Studio Code) so that the problems list captures all of the errors (e.g., linter errors) from the webpack compilation. To get that working, I need to have messages that vscode can look for to know when a recompilation started and ended.

[evenstensberg]

Hi @domehead100 wow, that's quite extensive, you're smart!

My hypothesis is that webpack-merge doesn't merge the two configurations correctly. If you can console log the exported configurations before exporting them, filter out confidencial content and log them here, that would be great.

[domehead100]

Ha. If I was smart, our setup would be simple :). "Any fool can make something complicated.” Thanks though, even if you were ribbing me.

Anyway, here's culled output from our dev build without --info-verbosity in the command line (so that the build will actually run). Search for "step1", "step2", "step3" to see the console.log() output of the configs. In reality, these came out in reverse in the actual console output (step3, step2, step1) so I manually edited the output to put them in order of occurrence. I guess the log statements were run as the stack unwound.

In our React config(s), we use the functional form of module.exports, so I put console.log() statements at the end before the config was being returned (and again, they came out in reverse order in the output):

module.exports = (env, opts) => {
  ...
  console.log(<the config>);
  return <the config>;
}

The only thing that I see that is kind of interesting is that the plugins array in what was logged as "step1" shows mostly entries of type [Object], whereas in the child/chained configs, the plugins arrays show actual plugin names. Again, keep in mind that "step1" actually was logged last in the real console output. (Maybe I should have just left the output alone?).

It now occurs to me that using merge on the plugins array is probably a bad idea, since a merge would have a hard time with an array. I'll try not using merge and just concat plugins from dev/prod and see if I get the error.

building React vendor bundle (sync)
=> .\React\webpack.config.vendor.js
env development
Time: 3646ms
React vendor bundle built or unchanged
...
step1: parallel configs exported from root config 
    // file: ./webpack.config.js
    // const rv = [
    //     env === "development" 
    //         ? require("./webpack.config.dev.js") 
    //         : require("./webpack.config.prod.js"),
    //     require("./React/webpack.config.js")(env, opts),
    // ];
    // console.log("step1: parallel configs exported from root config", rv);
    // return rv;
[ 
  { 
    name: 'jQuery',
    mode: 'development',
    devtool: '#cheap-module-eval-source-map',
    stats:
     { all: false,
       colors: true,
       errors: true,
       errorDetails: false,
       warnings: true,
       timings: true,
       chunks: false,
       chunkOrigins: false,
       entrypoints: true,
       depth: false,
       warningsFilter: [Array] },
    entry:
     { // about 20 separate bundles are build on the jQuery side },
    externals: { angular: 'angular', jquery: '$' },
    module: { rules: [Array] },
    node: { fs: 'empty', net: 'empty', tls: 'empty' },
    output:
     { filename: '[name].js',
       path: .\\dist\\main',
       pathinfo: true },
    plugins: [ CheckerPlugin {}, [Object], [Object] ],
    resolve: { extensions: [Array] } 
  },
  { 
    name: 'React',
    resolve: { extensions: [Array], modules: [Array], alias: [Object] },
    node: { fs: 'empty', net: 'empty', tls: 'empty', vertx: 'empty' },
    stats:
     { all: false,
       colors: true,
       errors: true,
       errorDetails: false,
       warnings: true,
       timings: true,
       chunks: true,
       chunkOrigins: false,
       entrypoints: true,
       depth: false,
       reasons: false,
       source: false,
       moduleTrace: false,
       warningsFilter: [Array] },
    entry:
     { app: [Array],
       tabularReports: [Array],
       codingPage: [Array],
       emCalculator: [Array],
       inbox: [Array],
       auditing: [Array] },
    output:
     { path: .\\dist\\react',
       publicPath: 'React/',
       filename: '[name].js',
       chunkFilename: '[name].js' },
    module: { rules: [Array] },
    plugins:
     [ [Object],
       NoEmitOnErrorsPlugin {},
       [Object],
       [Object],
       [Object],
       [Object],
       [Object],
       [Object],
       [Object] ],
    mode: 'development',
    devtool: '#cheap-module-eval-source-map',
    watch: true } 
]

building jQuery bundles (async)
=> .\webpack.config.js
env development

...

building React bundles (async)
=> .\React\webpack.config.js
env development
=> .\React\webpack.config.dev.js
env development

...

step2: React root config returns prod or dev config:
{
  name: 'React',
  resolve:
   { extensions: [ '.ts', '.tsx', '.js', '.jsx', 'web.jsx', 'web.js', '.json' ],
     modules: [ 'src', 'node_modules' ],
  node: { fs: 'empty', net: 'empty', tls: 'empty', vertx: 'empty' },
  stats:
   { all: false,
     colors: true,
     errors: true,
     errorDetails: false,
     warnings: true,
     timings: true,
     chunks: true,
     chunkOrigins: false,
     entrypoints: true,
     depth: false,
     reasons: false,
     source: false,
     moduleTrace: false,
     warningsFilter:
      [ /WARNING in \./g,
        /export 'IValidation' was not found in '_types\/IValidation'/g,
        /export 'FormField' was not found in '\.\/form-model'/g,
        'dummy string' ] },
  entry:
   { app:
      [ .\\React\\src\\_entry\\app' ],
     bundle1:
      [ .\\React\\src\\_entry\\bundle1' ],
     bundle2:
      [ .\\React\\src\\_entry\\bundle2' ],
     bundle3:
      [ .\\React\\src\\_entry\\bundle3' ],
     bundle4:
      [ .\\React\\src\\_entry\\bundle4' ],
     bundle5:
      [ .\\React\\src\\_entry\\bundle5' ] },
  output:
   { path: .\\dist\\react',
     publicPath: 'React/',
     filename: '[name].js',
     chunkFilename: '[name].js' },
  module: { rules: [ [Object], [Object], [Object], [Object] ] },
  plugins:
   [ CaseSensitivePathsPlugin { options: {}, pathCache: {}, fsOperations: 0, primed: false },
     NoEmitOnErrorsPlugin {},
     WebpackCleanupPlugin { options: [Object] },
     WatchIgnorePlugin { paths: [Array] },
     ForkTsCheckerWebpackPlugin {
       options: {},
       tsconfig: './tsconfig.json',
       tslint: undefined,
       watch: [],
       ignoreDiagnostics: [],
       ignoreLints: [],
       logger: [Object],
       silent: false,
       async: true,
       checkSyntacticErrors: false,
       workersNumber: 1,
       memoryLimit: 2048,
       useColors: true,
       colors: [Object],
       formatter: [Function: defaultFormatter],
       tsconfigPath: undefined,
       tslintPath: undefined,
       watchPaths: [],
       compiler: undefined,
       started: undefined,
       elapsed: undefined,
       cancellationToken: undefined,
       isWatching: false,
       checkDone: false,
       compilationDone: false,
       diagnostics: [],
       lints: [],
       emitCallback: [Function: noopEmitCallback],
       doneCallback: [Function: doneCallback],
       typescriptVersion: '2.8.3',
       tslintVersion: undefined,
       vue: false },
     MiniCssExtractPlugin { options: [Object] },
     DllReferencePlugin { options: [Object] },
     IgnorePlugin {
       resourceRegExp: /vertx/,
       contextRegExp: undefined,
       checkIgnore: [Function: bound checkIgnore] },
     DefinePlugin { definitions: [Object] } ],
  mode: 'development',
  devtool: '#cheap-module-eval-source-map',
  watch: true 
}

step3: dev config uses webpack-merge to return a dev config by merging with a common config
    // file: ./React/webpack.config.dev.js
    // const merge = require("webpack-merge");
    // const common = require("./webpack.common.js");
    // ..
    // const rv = merge(common, {
    //     mode: "development",
    //     devtool: "#cheap-module-eval-source-map",
    //     watch: true,
    //     plugins: [
    //         new webpack.DefinePlugin({
    //             "process.env": {
    //                 NODE_ENV: JSON.stringify("development"),
    //             },
    //             "PRODUCTION": JSON.stringify(false),
    //             "__DEV__": JSON.stringify(true),
    //         }),
    //     ],

common config: 
{ 
  name: 'React',
  resolve:
   { extensions: [ '.ts', '.tsx', '.js', '.jsx', 'web.jsx', 'web.js', '.json' ],
     modules: [ 'src', 'node_modules' ],
  node: { fs: 'empty', net: 'empty', tls: 'empty', vertx: 'empty' },
  stats:
   { all: false,
     colors: true,
     errors: true,
     errorDetails: false,
     warnings: true,
     timings: true,
     chunks: true,
     chunkOrigins: false,
     entrypoints: true,
     depth: false,
     reasons: false,
     source: false,
     moduleTrace: false,
     warningsFilter:
      [ /WARNING in \./g,
        /export 'IValidation' was not found in '_types\/IValidation'/g,
        /export 'FormField' was not found in '\.\/form-model'/g,
        'dummy string' ] },
  entry:
   { app:
      [ .\\React\\src\\_entry\\app' ],
     bundle1:
      [ .\\React\\src\\_entry\\bundle1' ],
     bundle2:
      [ .\\React\\src\\_entry\\bundle2' ],
     bundle3:
      [ .\\React\\src\\_entry\\bundle3' ],
     bundle4:
      [ .\\React\\src\\_entry\\bundle4' ],
     bundle5:
      [ .\\React\\src\\_entry\\bundle5' ] },
  output:
   { path: .\\dist\\react',
     publicPath: 'React/',
     filename: '[name].js',
     chunkFilename: '[name].js' },
  module: { rules: [ [Object], [Object], [Object], [Object] ] },
  plugins:
   [ CaseSensitivePathsPlugin { options: {}, pathCache: {}, fsOperations: 0, primed: false },
     NoEmitOnErrorsPlugin {},
     WebpackCleanupPlugin { options: [Object] },
     WatchIgnorePlugin { paths: [Array] },
     ForkTsCheckerWebpackPlugin {
       options: {},
       tsconfig: './tsconfig.json',
       tslint: undefined,
       watch: [],
       ignoreDiagnostics: [],
       ignoreLints: [],
       logger: [Object],
       silent: false,
       async: true,
       checkSyntacticErrors: false,
       workersNumber: 1,
       memoryLimit: 2048,
       useColors: true,
       colors: [Object],
       formatter: [Function: defaultFormatter],
       tsconfigPath: undefined,
       tslintPath: undefined,
       watchPaths: [],
       compiler: undefined,
       started: undefined,
       elapsed: undefined,
       cancellationToken: undefined,
       isWatching: false,
       checkDone: false,
       compilationDone: false,
       diagnostics: [],
       lints: [],
       emitCallback: [Function: noopEmitCallback],
       doneCallback: [Function: doneCallback],
       typescriptVersion: '2.8.3',
       tslintVersion: undefined,
       vue: false },
     MiniCssExtractPlugin { options: [Object] },
     DllReferencePlugin { options: [Object] },
     IgnorePlugin {
       resourceRegExp: /vertx/,
       contextRegExp: undefined,
       checkIgnore: [Function: bound checkIgnore] } ] 
}

dev config (which is created by using webpack-merge as above for just a couple of tweaks to common config):
{ 
  name: 'React',
  resolve:
   { extensions: [ '.ts', '.tsx', '.js', '.jsx', 'web.jsx', 'web.js', '.json' ],
     modules: [ 'src', 'node_modules' ],
  node: { fs: 'empty', net: 'empty', tls: 'empty', vertx: 'empty' },
  stats:
   { all: false,
     colors: true,
     errors: true,
     errorDetails: false,
     warnings: true,
     timings: true,
     chunks: true,
     chunkOrigins: false,
     entrypoints: true,
     depth: false,
     reasons: false,
     source: false,
     moduleTrace: false,
     warningsFilter:
      [ /WARNING in \./g,
        /export 'IValidation' was not found in '_types\/IValidation'/g,
        /export 'FormField' was not found in '\.\/form-model'/g,
        'dummy string' ] },
  entry:
   { app:
      [ .\\React\\src\\_entry\\app' ],
     bundle1:
      [ .\\React\\src\\_entry\\bundle1' ],
     bundle2:
      [ .\\React\\src\\_entry\\bundle2' ],
     bundle3:
      [ .\\React\\src\\_entry\\bundle3' ],
     bundle4:
      [ .\\React\\src\\_entry\\bundle4' ],
     bundle5:
      [ .\\React\\src\\_entry\\bundle5' ] },
  output:
   { path: .\\dist\\react',
     publicPath: 'React/',
     filename: '[name].js',
     chunkFilename: '[name].js' },
  module: { rules: [ [Object], [Object], [Object], [Object] ] },
  plugins:
   [ CaseSensitivePathsPlugin { options: {}, pathCache: {}, fsOperations: 0, primed: false },
     NoEmitOnErrorsPlugin {},
     WebpackCleanupPlugin { options: [Object] },
     WatchIgnorePlugin { paths: [Array] },
     ForkTsCheckerWebpackPlugin {
       options: {},
       tsconfig: './tsconfig.json',
       tslint: undefined,
       watch: [],
       ignoreDiagnostics: [],
       ignoreLints: [],
       logger: [Object],
       silent: false,
       async: true,
       checkSyntacticErrors: false,
       workersNumber: 1,
       memoryLimit: 2048,
       useColors: true,
       colors: [Object],
       formatter: [Function: defaultFormatter],
       tsconfigPath: undefined,
       tslintPath: undefined,
       watchPaths: [],
       compiler: undefined,
       started: undefined,
       elapsed: undefined,
       cancellationToken: undefined,
       isWatching: false,
       checkDone: false,
       compilationDone: false,
       diagnostics: [],
       lints: [],
       emitCallback: [Function: noopEmitCallback],
       doneCallback: [Function: doneCallback],
       typescriptVersion: '2.8.3',
       tslintVersion: undefined,
       vue: false },
     MiniCssExtractPlugin { options: [Object] },
     DllReferencePlugin { options: [Object] },
     IgnorePlugin {
       resourceRegExp: /vertx/,
       contextRegExp: undefined,
       checkIgnore: [Function: bound checkIgnore] },
     DefinePlugin { definitions: [Object] } ],
  mode: 'development',
  devtool: '#cheap-module-eval-source-map',
  watch: true 
}

...

Starting type checking service...
Using 1 worker with 2048MB memory limit

webpack is watching the files…

[at-loader] Using typescript@2.8.3 from typescript and "tsconfig.json" from ./tsconfig.json (in a forked process).

Warning: The 'no-boolean-literal-compare' rule requires type information.
ts-loader: Using typescript@2.8.3 and .\React\tsconfig.json

[at-loader] Checking started in a separate process...

WebpackCleanupPlugin: 0 file(s) deleted.

[at-loader] Ok, 2.503 sec.

WebpackCleanupPlugin: 0 file(s) deleted.
No type errors found
Version: typescript 2.8.3
Time: 7152ms

... webpack output listing bundles, etc. ...