[parsing error] Typescript Parsing errors silently on `<script>` tags. Requires `--debug`. (`ESLint was configured to run on... .astro/1_2.ts`, TSConfig does not include this file ) #402

alexrecuenco · 2024-06-26T17:44:55Z

Before You File a Bug Report Please Confirm You Have Done The Following...

I have tried restarting my IDE and the issue persists.
I have updated to the latest version of the packages.

What version of ESLint are you using?

^8.57.0

What version of `eslint-plugin-astro` are you using?

^1.2.2

What did you do?

Please find the minimal reproducible case in the repository linked below

package.json

{
  "name": "astro-eslint-plugin-issue-report",
  "type": "module",
  "version": "0.0.2",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro check && astro build",
    "preview": "astro preview",
    "astro": "astro",
    "lint": "eslint ."
  },
  "dependencies": {
    "@astrojs/check": "^0.7.0",
    "astro": "^4.11.3",
    "typescript": "^5.5.2"
  },
  "devDependencies": {
    "@typescript-eslint/parser": "^7.14.1",
    "eslint": "^8.57.0",
    "eslint-plugin-astro": "^1.2.2",
    "typescript-eslint": "^7.14.1"
  }
}

eslint.config.mjs

import eslintPluginAstro from 'eslint-plugin-astro';
import tseslint from "typescript-eslint";
/** @type {import("@typescript-eslint/utils").TSESLint.FlatConfig.ConfigArray} */
export default [
  {ignores: ["*.config.*"]},
  ...tseslint.configs.strictTypeChecked,
  ...tseslint.configs.stylisticTypeChecked,
  // First issue, eslintPluginAstro MUST be defined after, since it overrides the typescript parser
  ...eslintPluginAstro.configs["flat/all"],
  {
    rules: {
      '@typescript-eslint/await-thenable': "error",
      // Error: Error while loading rule '@typescript-eslint/await-thenable': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
      "@typescript-eslint/no-explicit-any": "error",
    },
  },
  {
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.json", "./tsconfig.eslint.json"],
        // When typescript/eslint v8 comes out this will become projectService
        // https://github.com/typescript-eslint/typescript-eslint/issues/9141
        // EXPERIMENTAL_useProjectService: true,
        // DEPRECATED__createDefaultProgram: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  }
];

src/index.astro

---
const a = 1;
console.log("b");

const c: any = 1;
const b = 0;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body id="myroot">
    <div class="container">
      <h1>Astro {a}</h1>
    </div>
  </body>

  <script>
    const c = null!;
    const d: any = 1;

    const element = document.getElementById("my-root")!;
    element.offsetLeft += 4;
    console.log(d);
    console.log("c");
    const container = document.querySelector(".container")!;
    container.scrollLeft += 2;
  </script>
</html>

What did you expect to happen?

The code in <script> tags is linted

What actually happened?

The code in between --- is linted, but not the one inside script tags

Link to Minimal Reproducible Example

Minimal reproducible example can be found at the tag minimal-error on this repo (See this last commit for extra details on the exact steps taken): https://github.com/alexrecuenco/astro-eslint-plugin-report-issue/tree/minimal-error

On top of that, I did some further exploration and I describe my brief findings on the commit message(s) at this tag https://github.com/alexrecuenco/astro-eslint-plugin-report-issue/tree/type-discrepancy

__

Additional comments

First of all, I reported an issue that seems to have disappeared with a related problem. I had thought it was fixed, but it turns out it isn't.

In that thread, —which I can't reference anymore since it must've gotten cleaned/cleared— by following the recommendations of this plugin's authors I added

  {
    languageOptions: {
      parserOptions: {
        project: ["./tsconfig.json"],
        tsconfigRootDir: import.meta.dirname,
      },
    },
  }

That seems to have done the trick, I stopped getting typescript-eslint crashing when running. Unbeknownst to us, it turns out, the issue was still hiding away. By running with --debug you can see that all the "virtual typescript files" (*.astro/1_1.ts) are not parsed. These represent the script tags, and because the error happens in a file that isn't real, eslint doesn't report you the issue, it simply crashes silently while processing those files.

Here is the result running with --debug:

  eslint:linter Resolving configuration again because the file content or extension was changed. +1ms
  eslint:linter With flat config: /Volumes/Workspace/external/astro-eslint-plugin-report-issue/src/pages/index.astro/1_1.ts +0ms
  eslint:linter Parsing: /Volumes/Workspace/external/astro-eslint-plugin-report-issue/src/pages/index.astro/1_1.ts +11ms
  eslint:linter Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src/pages/index.astro/1_1.ts` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig 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
  eslint:linter Error: ESLint was configured to run on `<tsconfigRootDir>/src/pages/index.astro/1_1.ts` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project

I have tried to solve this by:

Adding the exact file to includes
Upgrading typescript from 5.4 to 5.5
By upgrading to version 8 of typescript eslint and eslint 9. I thought that since the new projectService is meant to process files that are "outside the project" it should be able to help, but that didn't work due to some other incompatibility between versions, I believe eslint-plugin-astro still doesn't regard eslint 9 as a valid peer dependency.
For that reason, I switched back to version 7 an d8 respectively and tried using EXPERIMENTAL_useProjectService. Funnily enough, that makes the top section of an astro file fail with a parsing error, even though script tags now report linting appropriately .
Finally, I ran eslint with a debugger line by line, and found the following is where it is diverging paths

/node_modules/@typescript-eslint/typescript-estree/dist/create-program/createProjectProgram.js

function createProjectProgram(parseSettings, programsForProjects) {
    log('Creating project program for: %s', parseSettings.filePath);
    const astAndProgram = (0, node_utils_1.firstDefined)(programsForProjects, currentProgram => (0, shared_1.getAstFromProgram)(currentProgram, parseSettings.filePath));
    // The file was either matched within the tsconfig, or we allow creating a default program
    // eslint-disable-next-line deprecation/deprecation -- will be cleaned up with the next major
    if (astAndProgram || parseSettings.DEPRECATED__createDefaultProgram) {
        return astAndProgram;
    }
    ...
}

Well, looking at that section, by using DEPRECATED__createDefaultProgram: true in the settings it "works". It can parse both script tags and the top section of an .astro file.

But of course, once you do that, the recommended trick to create a jsx.d.ts stops working, it regards everything as "any" (that is what the tag [type-discrepancy] explores)

For context, the full debug output of eslint that I have described can be found in the repo linked on the files /results-*.md

I hope this report is helpful to find how to fix this

The text was updated successfully, but these errors were encountered:

ota-meshi · 2024-06-27T23:44:50Z

Thank you for posting this issue and sharing the repository.

However, I can't seem to reproduce the problem. Am I doing something wrong?

ota-meshi · 2024-06-27T23:56:48Z

Got it. I can reproduce it by commenting out DEPRECATED__createDefaultProgram.

The problem is that the virtual files generated by the eslint processor cannot be parsed with types using typescript-eslint/parser.

For now, you must disable type checking for virtual files.

  {
    files: ["**/*.astro/*.ts"],
    languageOptions: {
      parserOptions: {
        project: null
      },
    },
    ...tseslint.configs.disableTypeChecked
  }

ota-meshi · 2024-06-27T23:58:45Z

It is related to this issue.

#240 (comment)

alexrecuenco · 2024-06-28T10:57:10Z

Thank you for your time

Is it possible to provide feedback when it fails? Now it is failing silently and that makes it hard to understand what was going on

I was looking at the internals already, so I could try to help... see if I find how to feed the virtual file information and do a PR?

I don't know if I have enough time, but any hints/guidance on how I might be able to get started?

Or maybe you want to wait for es lint 9 and typescript-eslint 8

ota-meshi · 2024-06-30T01:29:01Z

I don't know yet if there is a way to solve them. Maybe there are other problems besides this plugin, so we need to look into them one by one.

alexrecuenco added a commit to alexrecuenco/astro-eslint-plugin-report-issue that referenced this issue Jun 26, 2024

Report sent ota-meshi/eslint-plugin-astro#402

96d9ad4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[parsing error] Typescript Parsing errors silently on `<script>` tags. Requires `--debug`. (`ESLint was configured to run on... .astro/1_2.ts`, TSConfig does not include this file ) #402

[parsing error] Typescript Parsing errors silently on `<script>` tags. Requires `--debug`. (`ESLint was configured to run on... .astro/1_2.ts`, TSConfig does not include this file ) #402

alexrecuenco commented Jun 26, 2024 •

edited

Loading

ota-meshi commented Jun 27, 2024

ota-meshi commented Jun 27, 2024

ota-meshi commented Jun 27, 2024

alexrecuenco commented Jun 28, 2024 •

edited

Loading

ota-meshi commented Jun 30, 2024

[parsing error] Typescript Parsing errors silently on <script> tags. Requires --debug. (ESLint was configured to run on... .astro/1_2.ts, TSConfig does not include this file ) #402

[parsing error] Typescript Parsing errors silently on <script> tags. Requires --debug. (ESLint was configured to run on... .astro/1_2.ts, TSConfig does not include this file ) #402

Comments

alexrecuenco commented Jun 26, 2024 • edited Loading

Before You File a Bug Report Please Confirm You Have Done The Following...

What version of ESLint are you using?

What version of eslint-plugin-astro are you using?

What did you do?

What did you expect to happen?

What actually happened?

Link to Minimal Reproducible Example

Additional comments

ota-meshi commented Jun 27, 2024

ota-meshi commented Jun 27, 2024

ota-meshi commented Jun 27, 2024

alexrecuenco commented Jun 28, 2024 • edited Loading

ota-meshi commented Jun 30, 2024

[parsing error] Typescript Parsing errors silently on `<script>` tags. Requires `--debug`. (`ESLint was configured to run on... .astro/1_2.ts`, TSConfig does not include this file ) #402

[parsing error] Typescript Parsing errors silently on `<script>` tags. Requires `--debug`. (`ESLint was configured to run on... .astro/1_2.ts`, TSConfig does not include this file ) #402

alexrecuenco commented Jun 26, 2024 •

edited

Loading

What version of `eslint-plugin-astro` are you using?

alexrecuenco commented Jun 28, 2024 •

edited

Loading