React typescript eslint error Parsing error: Unexpected token ! How to fix this?

So this is my index.tsx:

import React from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';


const container = document.getElementById('root')!;
const root = createRoot(container);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

and this is my eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['plugin:react/recommended', 'prettier'],
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      parserOptions: {
        project: ['./tsconfig.json']
      }
    }
  ],
  parserOptions: {
    parser: 'babel-eslint',
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['react', '@typescript-eslint', 'prettier', 'simple-import-sort'],

i have tried to install babel-eslint, and add it like a parser? but it didin`t help

so here`s the question, how to solve the problem “error Parsing error: Unexpected token !”?

Answer

Set typescript-eslint as your parser by adding "parser": "@typescript-eslint/parser",.

https://typescript-eslint.io/docs/