How to output eslint errors in the browser when using reactjs

Question

Normally i have set up my project using the create-react-app cli tool. How can i setup my ReactJS project to output ESLint errors and warnings in the browser. More specifically i want it to output any ESLint errors and warnings just like VueJS does.

VueJS will normally output any warning or error on a semi transparent screen in the browser and will not display the app until you resolve the ESLint errors.

Thank you.

Answer 1

To output eslint errors in the browser you can use the following combination of plugins in webpack.js :

...
plugins: [
  new ESLintPlugin({
    files: 'src/**/*.(js|jsx|ts|tsx)',
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    configFile: '.eslintrc.json',
    lintDirtyModulesOnly: true,
    emitError: true,
    emitWarning: true,
    failOnError: false,
    failOnWarning: false,
  }),
  new ErrorOverlayPlugin(),
  new webpack.HotModuleReplacementPlugin({}),
],
...

Assumptions:

• you use webpack.js as a bundle tool
• you have configured .eslintrc.json for your project
• you have installed and imported ESLintPlugin and ErrorOverlayPlugin into your webpack.js file