Dev server crashes with typescript-eslint error when creating new Vue/TS files

[mmdlow]

What happened?

This error occurs with TypeScript enabled for the Quasar project. When the dev server is running, creating new empty Vue files will cause the dev server to crash the moment text is written to the new file (and presumably when linting occurs).

Error is reproducible in VS Code and IntelliJ.

What did you expect to happen?

Expected the dev server not to crash when creating new Vue files.

Reproduction URL

https://stackblitz.com/github/mmdlow/quasar-typescript-eslint?file=README.md

How to reproduce?

I provided a stackblitz link but I strongly recommend trying this in a local environment as this bug seems to crash the stackblitz editor.

1. Go to the repro link
2. npm run dev
3. Create a new Vue file, somewhere in src/pages or src/components
4. Write some text, e.g. insert the script tag like

<script setup lang="ts"></script>

5. Observe terminal output

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

TypeScript Support

Platforms/Browsers

Other

Quasar info output

Operating System - Darwin(23.2.0) - darwin/arm64
NodeJs - 22.17.0

Global packages
  NPM - 10.9.2
  yarn - Not installed
  pnpm - Not installed
  bun - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.18.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.2.1 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.17.0 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.17 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.5.1
  pinia - 3.0.3 -- Intuitive, type safe and flexible Store for Vue
  vite - 6.3.5 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.31.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.25.6 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - 5.5.4 -- TypeScript is a language for application scale JavaScript development
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

node:internal/event_target:1101
  process.nextTick(() => { throw err; });
                           ^
Error: Error while loading rule '@typescript-eslint/await-thenable': You have used a rule which requires type information, but don't have parserOptions set to generate type information for this file. See https://typescript-eslint.io/getting-started/typed-linting for enabling linting with type information.
Parser: vue-eslint-parser
Note: detected a parser other than @typescript-eslint/parser. Make sure the parser is configured to forward "parserOptions.project" to @typescript-eslint/parser.
Occurred while linting path/to/quasar-project/src/pages/AnotherPage.vue
    at throwError (path/to/quasar-project/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:38:11)
    at getParserServices (path/to/quasar-project/node_modules/@typescript-eslint/utils/dist/eslint-utils/getParserServices.js:27:9)
    at create (path/to/quasar-project/node_modules/@typescript-eslint/eslint-plugin/dist/rules/await-thenable.js:60:55)
    at Object.create (path/to/quasar-project/node_modules/@typescript-eslint/utils/dist/eslint-utils/RuleCreator.js:31:20)
    at createRuleListeners (path/to/quasar-project/node_modules/eslint/lib/linter/linter.js:1134:15)
    at path/to/quasar-project/node_modules/eslint/lib/linter/linter.js:1285:7
    at Array.forEach (<anonymous>)
    at runRules (path/to/quasar-project/node_modules/eslint/lib/linter/linter.js:1201:31)
    at #flatVerifyWithoutProcessors (path/to/quasar-project/node_modules/eslint/lib/linter/linter.js:2252:22)
    at Linter._verifyWithFlatConfigArrayAndWithoutProcessors (path/to/quasar-project/node_modules/eslint/lib/linter/linter.js:2343:43)

Additional context

Don't think the issue is browser-specific.

[yusufkandemir]

Hi. I've been wanting to document this behavior, so thank you for doing it.

This problem is related to the interaction between @vue/eslint-config-typescript and vite-plugin-checker, when using type-checked rules from typescript-eslint:

• @vue/eslint-config-typescript enables type-checked linting setup only if the file has <script lang="ts">(with or without setup), or the file has .ts, .tsx, etc. extensions. This is to optimize the linting performance.
• vite-plugin-checker creates the ESLint instance and config at the start of the dev server
• When you create a new file, vite-plugin-checker detects it and tries to lint it.
• However, as @vue/eslint-config-typescript didn't know about this file, it didn't enable type-checked linting for it. So, it fails.
• As vite-plugin-checker sees this not only as a simple linting error, but instead as a breaking ESLint error, it crashes the dev server.

If @vue/eslint-config-typescript didn't have this optimization(or have a way to turn it off), or vite-plugin-checker allowed recalculating the ESLint config, or handled this more gracefully, etc., we wouldn't have this problem.

There are different ways to solve this problem, but they mostly involve other projects, rather than something we can handle in Quasar core. So, it must be planned correctly and might require coordination with other projects' maintainers.

For now, you will just have to acknowledge this and restart the dev server after creating a new file, unfortunately.

[mmdlow]

@yusufkandemir thanks a lot for the explanation, was very useful as I don't have a very good understanding of ESLint internals. With some trial and error I did manage to find a workaround by experimenting with eslint.config.js; adding the following to the flat config seemed to resolve the issue:

import tsParser from '@typescript-eslint/parser';

export default defineConfigWithVueTs(
  // ...
  {
    files: ['**/*.vue'],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        project: ['./tsconfig.json'],
        tsconfigRootDir: import.meta.dirname,
      },
    },
  }
  // ...

So far I have not observed any side effects or performance issues as a result of this change in the config.