Enable ESLINT: I got an error: Cannot read properties of undefined (reading 'getTokens')

Question

my React application is encountering an error when I try to enable ESLint. I'm trying to find the cause, but haven't had any results yet. Does anyone know what the reason for this issue might be? Here is my ESLint configuration file.

module.exports = {
  root: true,
  env: {
    browser: true,
    es2020: true,
  },
  globals: {
    Types: 'readonly',
    Utils: 'readonly',
    React: 'readonly',
    JSX: 'readonly',
  },
  extends: [
    'next',
    'turbo',
    'airbnb',
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'prettier',
    'plugin:prettier/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    sourceType: 'module',
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },
  plugins: ['@typescript-eslint', 'simple-import-sort', 'prettier'],
  rules: {
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-floating-promises': 'off',
    '@typescript-eslint/no-namespace': 'off',
    '@typescript-eslint/no-unsafe-argument': 'off',
    '@typescript-eslint/no-unsafe-assignment': 'off',
    '@typescript-eslint/no-unsafe-call': 'off',
    '@typescript-eslint/no-unsafe-member-access': 'off',
    '@typescript-eslint/no-unsafe-return': 'off',
    '@typescript-eslint/unbound-method': 'off',
    '@typescript-eslint/no-misused-promises': 'off',
    '@typescript-eslint/no-unused-vars': [
      2,
      {
        argsIgnorePattern: '^_',
        caughtErrorsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/require-await': 'off',
    '@typescript-eslint/no-shadow': 'off',
    camelcase: 'off',
    'import/extensions': 'off',
    'import/first': 'error',
    'import/newline-after-import': 'error',
    'import/no-duplicates': 'error',
    'import/no-extraneous-dependencies': 'off',
    'import/no-unresolved': 'off',
    'import/prefer-default-export': 'off',
    'no-console': [
      'error',
      {
        allow: ['warn', 'error'],
      },
    ],
    'no-param-reassign': 0,
    'no-unused-expressions': 'off',
    'no-use-before-define': 'off',
    'no-return-assign': 'off',
    'no-shadow': 'off',
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
        semi: false,
      },
    ],
    'react/destructuring-assignment': 'off',
    'react/jsx-filename-extension': [
      1,
      {
        extensions: ['.tsx', '.jsx'],
      },
    ],
    'react/require-default-props': 'off',
    'react/react-in-jsx-scope': 'off',
    'react/jsx-props-no-spreading': 'off',
    'react/state-in-constructor': 'off',
    'simple-import-sort/exports': 'error',
    'simple-import-sort/imports': 'error',
    'consistent-return': 'off',
    // This is bug of eslint with tslint, which always raise the error
    'jsx-a11y/label-has-associated-control': 'off',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
}

I got an error: Cannot read properties of undefined (reading 'getTokens')

Answer 1

To help resolve this issue, you can update ESLint and its related plugins to their latest versions. Here's how you can do it using npm:

npm install eslint@latest @typescript-eslint/parser@latest @typescript-eslint/eslint-plugin@latest --save-dev

Once you've updated the dependencies, consider using a simplified ESLint configuration to start. Here's a clean configuration that you can use as a starting point:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    project: './tsconfig.json',
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['@typescript-eslint', 'react', 'prettier'],
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    'react/prop-types': 'off',
    'prettier/prettier': 'error',
  },
};

After updating the ESLint configuration, try running ESLint again:

npx eslint --ext .ts,.tsx .

This should help resolve the getTokens error. If you continue to face issues, ensure that your tsconfig.json is correctly configured and compatible with the ESLint setup.