I am encountering the following error when trying to run ESLint in my Next.js project:

Cannot serialize key 'parse' in parser: Function values are not supported.

This error appears when I run the following command or making build:

npm run lint

The issue occurs after clearing the .next/cache and attempting to re-run the lint command. My ESLint configuration uses @eslint/eslintrc and FlatCompat to extend next/core-web-vitals. I have also added some custom rules, including turning off the rule @next/next/no-img-element.

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const compat = new FlatCompat({
  baseDirectory: import.meta.dirname,
});

const eslintConfig = [
  ..pat.config({
    extends: ["next"],
    rules: {
      "react/no-unescaped-entities": "off",
      "@next/next/no-page-custom-font": "off",
       "@next/next/no-img-element": "off",
    },
  }),
];

export default eslintConfig;

and Next.config.mjs file is

/**
 * @type {import('next').NextConfig}
 */

// next.config.mjs
export default {
  // output: 'export',
  // reactStrictMode: true,
  images: {
    domains: [
      "randomuser.me",
      "i.pravatar",
      "example",
      "ocr-tests-bucket.s3.us-east-2.amazonaws",
    ],
  },
  // Environment variables (these can be overridden by .env files)
  env: {
    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
    CUSTOM_ENV_VAR: process.env.CUSTOM_ENV_VAR,
  },
  // i18n support, rewrites, redirects, and custom headers can be added here.
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          { key: "X-Content-Type-Options", value: "nosniff" },
          { key: "X-Frame-Options", value: "DENY" },
          { key: "X-XSS-Protection", value: "1; mode=block" },
          { key: "Referrer-Policy", value: "same-origin" },
          { key: "Permissions-Policy", value: "interest-cohort=()" },
          {
            key: "Feature-Policy",
            value: "geolocation 'none'; microphone 'none'; camera 'none'",
          },
          {
            key: "Strict-Transport-Security",
            value: "max-age=31536000; includeSubDomains; preload",
          },
        ],
      },
    ];
  },
};

and package.json file is;

{
  "name": "parsepoint",
  "version": "0.1.0",
  "private": true,
  "author": "Fab Tech Sol",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@hookform/resolvers": "^3.9.1",
    "@mui/icons-material": "^6.1.7",
    "@mui/material": "^6.1.7",
    "@radix-ui/react-avatar": "^1.1.1",
    "@radix-ui/react-checkbox": "^1.1.2",
    "@radix-ui/react-collapsible": "^1.1.1",
    "@radix-ui/react-dialog": "^1.1.4",
    "@radix-ui/react-dropdown-menu": "^2.1.2",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-popover": "^1.1.6",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-radio-group": "^1.2.1",
    "@radix-ui/react-scroll-area": "^1.2.1",
    "@radix-ui/react-select": "^2.1.2",
    "@radix-ui/react-separator": "^1.1.1",
    "@radix-ui/react-slot": "^1.1.2",
    "@radix-ui/react-switch": "^1.1.1",
    "@radix-ui/react-tabs": "^1.1.1",
    "@radix-ui/react-toast": "^1.2.2",
    "@react-leaflet/core": "^2.1.0",
    "@shadcn/ui": "^0.0.4",
    "axios": "^1.7.9",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "date-fns": "^3.6.0",
    "dotenv": "^16.4.7",
    "file-saver": "^2.0.5",
    "js-cookie": "^3.0.1",
    "leaflet": "^1.9.4",
    "lucide-react": "^0.460.0",
    "next": "^15.1.6",
    "react": "^18.3.1",
    "react-circular-progressbar": "^2.1.0",
    "react-day-picker": "^8.10.1",
    "react-dom": "^18.3.1",
    "react-hot-toast": "^2.5.1",
    "react-leaflet": "^4.2.1",
    "react-leaflet-cluster": "^2.1.0",
    "react-loading-skeleton": "^3.5.0",
    "react-toastify": "^11.0.2",
    "recharts": "^2.14.1",
    "sharp": "^0.33.5",
    "swr": "^2.3.2",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "yup": "^1.6.1",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@typescript-eslint/parser": "^8.23.0",
    "eslint": "^9",
    "eslint-config-next": "15.1.6",
    "postcss": "^8",
    "tailwindcss": "^3.4.1"
  }
}

The linting process should run without any errors, and the custom ESLint rules should be applied properly. The error should not appear, and the lint command should complete successfully.

I am encountering the following error when trying to run ESLint in my Next.js project:

Cannot serialize key 'parse' in parser: Function values are not supported.

This error appears when I run the following command or making build:

npm run lint

The issue occurs after clearing the .next/cache and attempting to re-run the lint command. My ESLint configuration uses @eslint/eslintrc and FlatCompat to extend next/core-web-vitals. I have also added some custom rules, including turning off the rule @next/next/no-img-element.

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const compat = new FlatCompat({
  baseDirectory: import.meta.dirname,
});

const eslintConfig = [
  ..pat.config({
    extends: ["next"],
    rules: {
      "react/no-unescaped-entities": "off",
      "@next/next/no-page-custom-font": "off",
       "@next/next/no-img-element": "off",
    },
  }),
];

export default eslintConfig;

and Next.config.mjs file is

/**
 * @type {import('next').NextConfig}
 */

// next.config.mjs
export default {
  // output: 'export',
  // reactStrictMode: true,
  images: {
    domains: [
      "randomuser.me",
      "i.pravatar",
      "example",
      "ocr-tests-bucket.s3.us-east-2.amazonaws",
    ],
  },
  // Environment variables (these can be overridden by .env files)
  env: {
    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
    CUSTOM_ENV_VAR: process.env.CUSTOM_ENV_VAR,
  },
  // i18n support, rewrites, redirects, and custom headers can be added here.
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          { key: "X-Content-Type-Options", value: "nosniff" },
          { key: "X-Frame-Options", value: "DENY" },
          { key: "X-XSS-Protection", value: "1; mode=block" },
          { key: "Referrer-Policy", value: "same-origin" },
          { key: "Permissions-Policy", value: "interest-cohort=()" },
          {
            key: "Feature-Policy",
            value: "geolocation 'none'; microphone 'none'; camera 'none'",
          },
          {
            key: "Strict-Transport-Security",
            value: "max-age=31536000; includeSubDomains; preload",
          },
        ],
      },
    ];
  },
};

and package.json file is;

{
  "name": "parsepoint",
  "version": "0.1.0",
  "private": true,
  "author": "Fab Tech Sol",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@hookform/resolvers": "^3.9.1",
    "@mui/icons-material": "^6.1.7",
    "@mui/material": "^6.1.7",
    "@radix-ui/react-avatar": "^1.1.1",
    "@radix-ui/react-checkbox": "^1.1.2",
    "@radix-ui/react-collapsible": "^1.1.1",
    "@radix-ui/react-dialog": "^1.1.4",
    "@radix-ui/react-dropdown-menu": "^2.1.2",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-popover": "^1.1.6",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-radio-group": "^1.2.1",
    "@radix-ui/react-scroll-area": "^1.2.1",
    "@radix-ui/react-select": "^2.1.2",
    "@radix-ui/react-separator": "^1.1.1",
    "@radix-ui/react-slot": "^1.1.2",
    "@radix-ui/react-switch": "^1.1.1",
    "@radix-ui/react-tabs": "^1.1.1",
    "@radix-ui/react-toast": "^1.2.2",
    "@react-leaflet/core": "^2.1.0",
    "@shadcn/ui": "^0.0.4",
    "axios": "^1.7.9",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "date-fns": "^3.6.0",
    "dotenv": "^16.4.7",
    "file-saver": "^2.0.5",
    "js-cookie": "^3.0.1",
    "leaflet": "^1.9.4",
    "lucide-react": "^0.460.0",
    "next": "^15.1.6",
    "react": "^18.3.1",
    "react-circular-progressbar": "^2.1.0",
    "react-day-picker": "^8.10.1",
    "react-dom": "^18.3.1",
    "react-hot-toast": "^2.5.1",
    "react-leaflet": "^4.2.1",
    "react-leaflet-cluster": "^2.1.0",
    "react-loading-skeleton": "^3.5.0",
    "react-toastify": "^11.0.2",
    "recharts": "^2.14.1",
    "sharp": "^0.33.5",
    "swr": "^2.3.2",
    "tailwind-merge": "^2.6.0",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "yup": "^1.6.1",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@typescript-eslint/parser": "^8.23.0",
    "eslint": "^9",
    "eslint-config-next": "15.1.6",
    "postcss": "^8",
    "tailwindcss": "^3.4.1"
  }
}

The linting process should run without any errors, and the custom ESLint rules should be applied properly. The error should not appear, and the lint command should complete successfully.

• next.js
• eslint

1 Answer 1

This is worked for me:

// eslint.config.mjs
import { FlatCompat } from "@eslint/eslintrc"
import path from "path"
import { fileURLToPath } from "url"

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

const compat = new FlatCompat({
baseDirectory: __dirname,
})

/** @type {import('eslint').Linter.Config[]} */
const configs = [
..pat.extends("next/core-web-vitals"),
..pat.extends("next/typescript"),

]

export default configs