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

mfisher87 commented 3 months ago

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!

```shell > test-create-vite-react-ts@0.0.0 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 `/src/App.tsx` using `parserOptions.project`: - /tsconfig.json - /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 `/src/main.tsx` using `parserOptions.project`: - /tsconfig.json - /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 `/src/vite-env.d.ts` using `parserOptions.project`: - /tsconfig.json - /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

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

lorand-horvath commented 2 months ago

@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 commented 2 months ago

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 :grimacing:

bluwy commented 2 months ago

Perhaps https://github.com/vitejs/vite/pull/17645 fixes it

mfisher87 commented 2 months ago

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.

vitejs / vite