create-vite with react-ts template: linting is broken after following type-aware linting instructions in template's README.md

[mfisher87]

Describe the bug

I'm trying to lint after following the "type-aware linting" instructions in the README of the react-ts template. But I'm getting errors:

0:0  error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src/App.tsx` using `parserOptions.project`: 
- <tsconfigRootDir>/tsconfig.json
- <tsconfigRootDir>/tsconfig.node.json
However, none of those TSConfigs include this file.

Reproduction

https://github.com/mfisher87/sscce-vite-react-ts-template-typeaware-linting-broken

Steps to reproduce

First, I create a new project with react-ts template:

npm create vite@latest . -- --template react-ts
npm install
npm run lint

This works fine.

Follow the instructions in the README:

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: ...

At this point, .eslintrc.cjs looks like:

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/strict-type-checked',
    'plugin:@typescript-eslint/stylistic-type-checked',
    'plugin:react-hooks/recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}

Then run npm run lint again to reproduce the error. 1 error of 3 similar errors shown (see bottom for full error):

/home/robatt/Projects/_tmp/test-create-vite-react-ts/src/App.tsx
  0:0  error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src/App.tsx` using `parserOptions.project`: 
- <tsconfigRootDir>/tsconfig.json
- <tsconfigRootDir>/tsconfig.node.json
However, none of those TSConfigs include this file. Either:
- Change ESLint's list of included files to not include this file
- Change one of those TSConfigs to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/troubleshooting/typed-linting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file

System Info

System:
    OS: Linux 6.8 Pop!_OS 22.04 LTS
    CPU: (16) x64 AMD Ryzen 7 5800X3D 8-Core Processor
    Memory: 15.26 GB / 31.26 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.4.1 - ~/.nvm/versions/node/v22.4.1/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v22.4.1/bin/npm
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1 
    vite: ^5.3.1 => 5.3.3

Used Package Manager

npm

Logs

Click to expand!

> [email protected] lint
> eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .

/home/robatt/Projects/_tmp/test-create-vite-react-ts/src/App.tsx
  0:0  error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src/App.tsx` using `parserOptions.project`: 
- <tsconfigRootDir>/tsconfig.json
- <tsconfigRootDir>/tsconfig.node.json
However, none of those TSConfigs include this file. Either:
- Change ESLint's list of included files to not include this file
- Change one of those TSConfigs to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/troubleshooting/typed-linting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file

/home/robatt/Projects/_tmp/test-create-vite-react-ts/src/main.tsx
  0:0  error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src/main.tsx` using `parserOptions.project`: 
- <tsconfigRootDir>/tsconfig.json
- <tsconfigRootDir>/tsconfig.node.json
However, none of those TSConfigs include this file. Either:
- Change ESLint's list of included files to not include this file
- Change one of those TSConfigs to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/troubleshooting/typed-linting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file

/home/robatt/Projects/_tmp/test-create-vite-react-ts/src/vite-env.d.ts
  0:0  error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src/vite-env.d.ts` using `parserOptions.project`: 
- <tsconfigRootDir>/tsconfig.json
- <tsconfigRootDir>/tsconfig.node.json
However, none of those TSConfigs include this file. Either:
- Change ESLint's list of included files to not include this file
- Change one of those TSConfigs to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/troubleshooting/typed-linting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file

✖ 3 problems (3 errors, 0 warnings)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[lorand-horvath]

@mfisher87 I don't use type-aware linting as described in the readme, but rely on typescript checking done by VSCode's intellisense. This is my .eslintrc.cjs file:

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
} 

[mfisher87]

I don't use VSCode. The parser options recommended in the README include two additional values, project and tsonfigRootDir:

  parserOptions: {                                                                                                                                                  
    ecmaVersion: 'latest',                              
    sourceType: 'module',                               
    project: ['./tsconfig.json', './tsconfig.node.json'],                                                       
    tsconfigRootDir: __dirname,                         
  },                                                    

Instead of removing those two items like you have, I worked around this issue by modifying this line in tsconfig.node.json to add src to the list:

  "include": ["vite.config.ts", "src"]

I'd like to propose a fix to the template, but I'm honestly not sure if I've fixed this in the "correct" way :) I write TypeScript maybe 1 month out of the year 😬

[bluwy]

Perhaps #17645 fixes it

[mfisher87]

This does in fact fix linting when I apply it to my "sscce" repository (if you want to test yourself, you can use the fix-attempt branch)! Thank you. I will comment similarly on the PR.