Search code examples
webpackwebpack-dev-servereslintwebpack-2

Suppress Webpack 2 + ESLint extra output (stack trace)

I'm migrating a project from create-react-app to a custom Webpack 2 configuration, and so far I have everything working as it was in the CRA version except for ESLint output.

I'm used to seeing the following...

Expected Output:

WARNING in ./src/apps/NotesApp/components/Replies/ReplyEditor.js

./src/apps/NotesApp/components/Replies/ReplyEditor.js
  17:1  warning  Line 17 exceeds the maximum line length of 120  max-len

✖ 1 problem (0 errors, 1 warning)

But now I'm getting a full stack trace that makes these warnings take up 2 - 3 times as much console/terminal space.

Evil Output:

WARNING in ./src/apps/NotesApp/components/Replies/ReplyEditor.js

./src/apps/NotesApp/components/Replies/ReplyEditor.js
  17:1  warning  Line 17 exceeds the maximum line length of 120  max-len

✖ 1 problem (0 errors, 1 warning)

 @ ./src/apps/NotesApp/components/Replies/Replies.js 3:0-40
 @ ./src/apps/NotesApp/components/Replies/ReplyPanel.js
 @ ./src/apps/NotesApp/components/Note.js
 @ ./src/apps/NotesApp/components/NotesList.js
 @ ./src/apps/NotesApp/containers/NotesModal.js
 @ ./src/apps/NotesApp/components/NotesApp.js
 @ ./src/apps/NotesApp/index.js
 @ ./build/buildImport.js
 @ ./src/apps/AppsLibrary/LibraryRoutes.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server (webpack)-dev-server/client?/ (webpack)/hot/dev-server.js react-hot-loader/patch ./src/index

What I've tried...

The following webpack.config.js options got rid of all output completely (which I don't want):

  1. devServer: { stats: 'none' }
  2. devServer: { quiet: true }
  3. devServer: { stats: { warnings: false }}

Every other option for devServer.stats had no effect on the stack trace.

And just to see if ESLint was creating the stack traces, I set a custom formatter to return blank:

rules: [
  {
    enforce: 'pre',
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'eslint-loader',
    options: { formatter: message => '' }
  }
]

...which has the following output:

WARNING in ./src/apps/NotesApp/components/Replies/ReplyEditor.js
ESLintError
 @ ./src/apps/NotesApp/components/Replies/Replies.js 3:0-40
 @ ./src/apps/NotesApp/components/Replies/ReplyPanel.js
 @ ./src/apps/NotesApp/components/Note.js
 @ ./src/apps/NotesApp/components/NotesList.js
 @ ./src/apps/NotesApp/containers/NotesModal.js
 @ ./src/apps/NotesApp/components/NotesApp.js
 @ ./src/apps/NotesApp/index.js
 @ ./build/buildImport.js
 @ ./src/apps/AppsLibrary/LibraryRoutes.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server (webpack)-dev-server/client?/ (webpack)/hot/dev-server.js react-hot-loader/patch ./src/index

The node.js execution of WebpackDevServer creates a stats object with all of the errors, warnings, and other information about the devServer, and each of the stats.warnings is a message formatted for shell like this:

"./src/apps/NotesApp/components/Replies/ReplyEditor.js

[4m./src/apps/NotesApp/components/Replies/ReplyEditor.js[24m
  [2m17:1[22m  [33mwarning[39m  Line 17 exceeds the maximum line length of 120  [2mmax-len[22m

[33m[1m✖ 1 problem (0 errors, 1 warning)
[22m[39m
 @ ./src/apps/NotesApp/components/Replies/Replies.js 3:0-40
 @ ./src/apps/NotesApp/components/Replies/ReplyPanel.js
 @ ./src/apps/NotesApp/components/Note.js
 @ ./src/apps/NotesApp/components/NotesList.js
 @ ./src/apps/NotesApp/containers/NotesModal.js
 @ ./src/apps/NotesApp/components/NotesApp.js
 @ ./src/apps/NotesApp/index.js
 @ ./build/buildImport.js
 @ ./src/apps/AppsLibrary/LibraryRoutes.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server (webpack)-dev-server/client?/ (webpack)/hot/dev-server.js react-hot-loader/patch ./src/index"

...which makes it look like I could just intercept the messages and do something like stats.warnings.map(message => message.replace(/^\s*(at|@)+.*\n*/gm, '')), but that has zero effect also.

Does anyone know where this stack trace is being generated and if there's ANY way to turn it off?

Solution

  • This is possible from version 2.5.0 of webpack by setting moduleTrace: false in the stats object:

    module.exports = {
    ...
    stats: {
        moduleTrace: false,
    },
};