Next.js: Option to disable console (CLI terminal) clearing

[ravinggenius]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When developing an app, with or without a third-party server (express, for instance), the app should reload without "clearing" the terminal. When starting with next dev --preserve-log, the log should not be obscured. This option should also be available when starting programmatically with const app = next({ dev, preserveLog: true });.

Current Behavior

The log scrolls offscreen every time the app rebuilds.

Context

I will often start troubleshooting code with console.log. Having to take my hands off the keyboard to scroll back through the logs slows me down and breaks my flow.

Your Environment

| Tech | Version |
|---------|-------------|
| next | v4.1.1 |
| node | v8.7.0 |
| OS | macOS 10.13 |

[liweinan0423]

+1

[skyend]

Using

const app = next({ dev, quiet: true });

[timneutkens]

The terminal clearing is done by friendly-errors-webpack-plugins https://github.com/geowarin/friendly-errors-webpack-plugin so this is an upstream issue 👍

[ravinggenius]

Thanks for the responses! I did some investigation and discovered that next({ dev, quiet: true }) will skip friendly-errors-webpack-plugin altogether. This works, but I like having the friendly messages the plugin provided. next doesn't currently pass any options to friendly-errors-webpack-plugin, so it's either the defaults-with-console-clearing or nothing. Would there be any interest in taking an object of options to pass through to friendly-errors-webpack-plugin? I'm happy to provide a pull request if it has a chance of being merged. This also opens the door to enable desktop notifications, which would be nice.

[JasonRitchie]

With the new Next.js 5 extendable webpack configuration, you can do the following:

Inside your next.config.js, mimic the default loading of the plugin (as shown here https://github.com/zeit/next.js/blob/canary/server/build/webpack.js)

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')

module.exports = {
  webpack(config, { isServer, dev }) {
    // remove friendlyerrorsplugin
    config.plugins = config.plugins.filter((plugin) => plugin.constructor.name !== 'FriendlyErrorsWebpackPlugin')

    // add it back in with custom options
    if (dev && !isServer) {
      config.plugins.push(new FriendlyErrorsWebpackPlugin({ clearConsole: false }))
    }
    return config
  }
}

[ravinggenius]

Thank you @JasonRitchie. I'm not using Next anymore, but I'll look this up the next time I do.

[binarykitchen]

The above hack might work but isn't very elegant. Can't we introduce a new option here to disable console clearing, simple as that?

[hiddentao]

Would be nice to have this.

[maerzhase]

@JasonRitchie 's example isn't working anymore. shortly printing all plugins from the next-js-config showed that there is no friendly-errors-webpack-plugin. how is the clearing handled in the latest version?