"Need to disable some ESLint rules" eslint next.config.js- Nextjs Build Failed in Production

 

Ahoy, fellow developers!❤

Have you ever been stuck with "Need to disable some ESLint rules" in nextjs while working on a production build of Next.js? 

But do not worry—a solution exists! In its infinite wisdom, Next.js has a built-in linting process that carefully examines your code.

Disabling the built-in linting phase completely is an option for those who dare and want Next.js to remain silent even when production builds encounter ESLint issues. 

ESLint next.config.js

ESLint is a fantastic tool that maintains code cleanliness and enforces coding standards. It can render code considerably more understandable and help prevent problems. Using this tool will benefit solo developers as well as team members by preserving some uniformity across projects involving multiple developers.

How to set up Custom rules on next config js?

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  images: {
    domains: [
      "localhost",
      "193.169.2.116",
      "api.project.iosx.in",
      "api.project.info",
      "project.info",
    ],
  },
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  },
  future: {
    // by default, if you customize webpack config, they switch back to version 4.
    // Looks like backward compatibility approach.
    webpack5: true,
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(mp4|webm)$/i,
      use: [
        {
          loader: "file-loader",
          options: {
            publicPath: "/_next",
            name: "static/media/[name].[hash].[ext]",
          },
        },
      ],
    });
    config.resolve.fallback = {
      // if you miss it, all the other options in fallback, specified
      // by next.js will be dropped.
      ...config.resolve.fallback,
      // fs: false, // the solution
    };

    // config.resolve.fallback = { fs: false };
    return config;
  },
};

module.exports = nextConfig;

To activate the ignoreDuringBuilds option in the eslint settings, open next.config.js and paste this as I did above:

module.exports = {
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  },
}

That's it! We are done😀

Happy Coding✌