Next.js: eslint-loader doesn't appear to be respected

[ryami333]

Have attempted to extend the webpack config in next.config.js to use the eslint-loader (to give warnings and/or errors during dev or build, much the same as Create React App does.

What I've tried:

/* next.config.js */
module.exports = {
    webpack: config => {
        config.module.rules.push(
            {
                test: /\.js$/,
                enforce: 'pre',
                exclude: /node_modules/,
                loader: 'eslint-loader',
            },
        );
        return config;
    },
};

/* pages/index.js */
import React from 'react';

// This line should produce an eslint error, 'foo' is assigned a variable but never used
const foo = 'bar';

function Page() {
    return <h1>Welcome to next.js!</h1>
};

export default Page;

What happens:

dev and build both run without incident.

What I expect to happen:

dev and build to either fail entirely, or to produce an error in the browser, the browser console, or the CLI.

What I've already found:

I found this issue already, which I believe might have been prematurely closed - a user referenced a way to configure the loader, which the OP had presumably already done.

---

Has anybody got any idea how I can configure nextjs to either fail-on-error or to emit some kind of error/warning message, in a similar way to CRA?

[vladmelnikov]

I have the same issue too

[davscro]

hi @ryami333,

I have working setup like:

if (!dev)
            config.plugins.push(
                new BundleAnalyzerPlugin({
                    analyzerMode: 'disabled',
                    // For all options see https://github.com/th0r/webpack-bundle-analyzer#as-plugin
                    generateStatsFile: true,
                    // Will be available at `.next/stats.json`
                    statsFilename: 'stats.json'
                })
            );
        else {
            config.module.rules.push(
                {
                    test: /\.js$/,
                    enforce: 'pre',

                    include: [
                        path.resolve('components'),
                        path.resolve('pages'),
                        path.resolve('utils')
                    ],
                    options: {
                        configFile: path.resolve('.eslintrc.js'),
                        eslint: {
                            configFile: path.resolve(__dirname, '.eslintrc.js')
                        }
                    },
                    loader: 'eslint-loader'
                }
            );
            config.devtool = 'cheap-module-eval-source-map';
        }

Please note else statement Let me know does it work for you as well.

[vladmelnikov]

@davscro it doesnt work for me

[ryami333]

Sorry @davscro, I abandoned Next for that project because of this issue, so I can't verify whether you setup works, but I'm fairly certain I had something almost identical.

[dsantic]

@ryami333 sorry about that.
@vladmelnikov Could you please share simple example of your setup?

[vladmelnikov]

@dsantic i tried this but always got error

Module build failed: TypeError: eslint.CLIEngine is not a constructor at Object.module.exports (C:\react-componentsnode_moduleseslint-loaderindex.js:176:27)
at Object.module.exports (C:\react-componentsnode_moduleseslint-loaderindex.js:176:27)

[felquis]

I'm trying to use custom image loaders at next.config.js with no success, I think it is kind of related to this issue.

[timneutkens]

This will be fixed in Next.js v5.