Unable to Deploy App Due to ESLint/Prettier Errors

Problem

This was only found in the past week of dev. No clue what change made this happen. We've got build errors for Prettier, and when you open that file, we've got a parsing error. I'm about 2 days into trying to figure out WTF is going on here with no luck.

Do you guys have any ideas?

Versions

"@typescript-eslint/eslint-plugin": "^6.20.0",
"@typescript-eslint/parser": "^6.20.0",
"eslint": "^8.56.0",
"eslint-config-next": "13.4.13",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^4.2.1",
"prettier": "^3.0.1"
"typescript": "5.1.6"

Config Files

ESLint Config:

{
  "env": {
    "node": true
  },
  "extends": ["next/core-web-vitals", "plugin:prettier/recommended", "plugin:react/recommended"],
  "ignorePatterns": [".eslintrc.js", "next.config.js", "sitemap.config.js"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@typescript-eslint/recommended"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "ecmaFeatures": {
          "jsx": true
        },
        "project": "./tsconfig.json",
        "tsconfigRootDir": "./",
        "sourceType": "module"
      },
      "plugins": ["@typescript-eslint/eslint-plugin", "prettier"],
      "rules": {
        "@next/next/no-img-element": "off",
        "@typescript-eslint/ban-ts-comment": "off",
        "@typescript-eslint/explicit-function-return-type": "off",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "@typescript-eslint/interface-name-prefix": "off",
        "@typescript-eslint/no-explicit-any": "off",
        "@typescript-eslint/no-floating-promises": "off",
        "@typescript-eslint/no-unnecessary-type-assertion": "warn",
        "@typescript-eslint/no-unsafe-member-access": "off",
        "@typescript-eslint/no-unsafe-call": "off",
        "@typescript-eslint/quotes": "off",
        "prettier/prettier": [
          "error",
          {
            "endOfLine": "auto"
          }
        ],
        "quotes": "off"
      }
    },
    {
      "files": ["*.js"],
      "extends": ["plugin:prettier/recommended"],
      "parserOptions": {
        "sourceType": "module"
      }
    }
  ],
  "root": true
}

TS Config:

{
  "compilerOptions": {
    "allowJs": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "bundler",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "target": "es6",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Prettier Config:

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "auto",
  "jsxSingleQuote": true,
  "printWidth": 120,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none"
}

NVM Config:

nvmrc - v18.18.2

What source code are you linting?

Next.js TS React app, TS/TSX files.

What did you expect to happen?

Expected lint and beautify to work, as they always do.

What actually happened?

Format on save doesn't work. Linting during build process fails. Errors below found. When you open a TS/TSX file, we now get the parsing error for all of them.

// build error
error ESLint: prettier.resolveConfig.sync is not a function Occurred while linting /path-to-file/*.tsx:2 Rule: "prettier/prettier"

// open file error
Parsing error: Cannot read file 'tsconfig.json'.

prettier / eslint-plugin-prettier