Annoying eslint error screen

[berdof]

During development i constantly having these messages http://take.ms/vksE2 . Is there any way to disable red error screen in the browser window but to stay it working in console?

[bdefore]

@berdof those are linting errors. I'm not entirely sure how they hook into the setup (perhaps with redbox-react, which is enabled here: https://github.com/erikras/react-redux-universal-hot-example/blob/master/.babelrc#L19) ... you can also turn off linting in webpack altogether by removing eslint-loader here: https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/dev.config.js#L67

[asaf]

See #170 , remove eslint-loader from dev.config.js jsx loader.

[berdof]

@asaf , you made my day! Thanks!

[rickyPanzer]

Any suggestions on how to keep the eslint-loader, but remove redbox? I've been messing with .babelrc and uninstalled redox w/ npm, but it still shows up

[Anomen]

Just add the option emitWarning=true in eslint-loader in the webpack configuration (https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/dev.config.js#L83).

The loader becomes: eslint-loader?emitWarning=true. Then, the lint errors will only be shown in the console of your browser.

[aseem2625]

Hey, just retouching the topic. It's annoying to see eslint errors while development. I am seeing eslint errors in the terminal console each time webpack tries to builds. https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/dev.config.js#L83

How to remove while development.

[coreylight]

@rickyPanzer don't know if you already figured it out but: That option is set within the webpack-hot-middleware options.

server.use(hotMiddleware(compiler, {
  overlay: false
}));

worked for me. Thanks!

[jgentes]

@coreylight that didn't work for me unfortunately :(

[coreylight]

@jgentes Indeed I actually figured out the real solution which is adding a flag onto the webpack-hot-middleware entry item in my webpack config.

webpack.config

  cache: true,
  context: context_dir,
  devtool: isProd ? 'hidden-source-map' : 'inline-soure-map',
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  entry: {
    'index': _.compact([
      !isProd && 'react-hot-loader/patch',
      !isProd && 'webpack-hot-middleware/client?overlay=false',
      './index.jsx'
    ]),
  },
  output: {
    path: path.join(__dirname, "dist"),
    publicPath: '/',
    filename: `[name].[hash].js`
  },

[jgentes]

Thanks, I'll give that a shot.. unfortunately can't reproduce the problem to test it right now.

[evserykh]

I can fix it using options for eslint-loader:

  ...
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        enforce: 'pre',
        use: [{ loader: 'eslint-loader', options: { emitWarning: true } }],
        exclude: /node_modules/,
      },
  ...

[rizkiandrianto]

@evserykh Did it disabled the overlay or enabled it?

Anybody know how to turn this on, because I installed and no overlay error :(

[evserykh]

@rizkiandrianto I guess you have two options:

1. webpack-hot-middleware/client?overlay=false - it will disable eslint's errors overlay and you won't see it anymore or
2. use: [{ loader: 'eslint-loader', options: { emitWarning: true } }] - make eslint generating warnings instead of errors (as I understood overlay is visible when there are errors only)

If you want to see errors overlay just use default settings webpack-hot-middleware/client with use: [{ loader: 'eslint-loader' }]