React typescript eslint 错误解析错误：意外的令牌？ 如何解决这个问题？

Question

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 1

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

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