How to resolve ESLint errors (quoted in description) and enforce overridden rules

Setting up eslint using flat config for a playwright project. Below is the eslint.config.js file:

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

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,
});

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...tseslint.configs.stylistic,
  ...compat.extends('airbnb-base'),

  {
    parserOptions: {
      projectService: true,
      tsconfigRootDir: import.meta.dirname,
    },
    files: [
      '*.ts',
    ],
    ignores: [
      'tests-examples/**',
      'test-results',
    ],
    rules: {
      'object-curly-newline': ['error', {
        ImportDeclaration: 'never',
      }],
      '@typescript-eslint/default-param-last': 'off',
      '@typescript-eslint/dot-notation': 'off',
      '@typescript-eslint/indent': ['error', 2, { SwitchCase: 1, ignoredNodes: ['PropertyDefinition'] }],
      '@typescript-eslint/lines-between-class-members': 'off',
      '@typescript-eslint/member-delimiter-style': 'error',
      '@typescript-eslint/member-ordering': 'off',
      '@typescript-eslint/no-empty-function': 'off',
      '@typescript-eslint/no-loop-func': 'off',
      '@typescript-eslint/no-shadow': 'off',
      '@typescript-eslint/no-throw-literal': 'off',
      '@typescript-eslint/no-unused-expressions': 'off',
      '@typescript-eslint/no-use-before-define': 'off',
      '@typescript-eslint/no-useless-constructor': 'off',
      '@typescript-eslint/type-annotation-spacing': 'error',
      'array-callback-return': 'off',
      'class-methods-use-this': 'off',
      'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
      'max-len': 'off',
      'prefer-const': 'error',
    },
  },
);

For the eslint and { FlatCompat } imports, I'm getting the following error:

<module> should be listed in the project's dependencies, not devDependencies.

For the tseslint import, I'm getting the following error:

Unable to resolve path to module 'typescript-eslint'.

I have installed the necessary packages, see package.json file:

{
  "name": "pw-e2e",
  "version": "1.0.0",
  "type": "module",
  "description": "Peek PlayWright PoC",
  "main": "index.js",
  "scripts": {
    "lint": "npx eslint ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@eslint/eslintrc": "^3.2.0",
    "@eslint/js": "^9.16.0",
    "@playwright/test": "^1.49.0",
    "@types/node": "^22.9.1",
    "@typescript-eslint/eslint-plugin": "^8.18.1",
    "@typescript-eslint/parser": "^8.18.1",
    "eslint": "^9.17.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-import-resolver-typescript": "^3.7.0",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-playwright": "^2.1.0",
    "globals": "^15.13.0",
    "typescript": "^5.7.2",
    "typescript-eslint": "^8.18.1"
  },
  "dependencies": {
    "dotenv": "^16.4.7"
  }
}

I'm also getting the same errors for import paths in ts files.

What I Have Tried

1. I've tried following the answer from this answer.
2. When I add '**/*.ts' to the files configuration, to include linting of sub-directory .ts files, the airbnb-base linting stops working as expected

I found that the problem was I using the FlatCompat facility with tseslint config. I went with removing the ...compat.extends('airbnb-base') since I'm using TS for the development.

Going with the base eslint config and implementing tslint would've removed some functionality I wanted from TSLint, so compromised on letting go of the airbnb lint.