Parsing error (',' expected) in <script> with typescript
Closed this issue · 10 comments
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.55.0
What version of eslint-plugin-astro are you using?
0.30.0
What did you do?
Configuration
.eslintrc.json contents:
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:astro/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint"
],
"rules": {
},
"overrides": [
{
"files": ["*.astro"],
"parser": "astro-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser",
"extraFileExtensions": [".astro"]
},
"rules": {
}
}
]
}package.json contents:
{
"name": "radiant-raspberry",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro check && astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.3.2",
"astro": "^4.0.4",
"typescript": "^5.3.3"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"eslint": "^8.55.0",
"eslint-plugin-astro": "^0.30.0"
}
}When running npx eslint . on an astro project using typescript and containing a script block like below, eslint reports Parsing error: ',' expected. This does not happen if the code is instead placed in the component script.
<script>
const x = new Map<string, string>();
</script>What did you expect to happen?
There should be no parsing error, only errors caused by lints.
What actually happened?
❯ npx eslint .
/home/garmelon/tmp/radiant-raspberry/src/pages/index.astro
19:33 error Parsing error: ',' expected
✖ 1 problem (1 error, 0 warnings)
Link to Minimal Reproducible Example
https://github.com/Garmelon/astro-eslint-bug-repro
Additional comments
No response
Thank you for posting this issue.
That's a bug. I would like to find a way to fix it.
I added the astro/client-side-ts processor to work around the problem. Use it like this:
overrides: [
{
files: ["*.astro"],
// ...
processor: "astro/client-side-ts", // <- Uses the "client-side-ts" processor.
rules: {
// ...
},
},
// ...
],Thanks! Can confirm that this fixes the error.
Hi @ota-meshi / @Garmelon, when I attempt to add the processor I'm getting the following issue when i attempt to run eslint
Error: ESLint configuration of processor in '.eslintrc.cjs#overrides[0]' is invalid: 'astro/client-side-ts' was not found.
These are my package.json dependencies (stripped to what is relevant)
"dependencies": {
"astro": "^4.0.6",
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-astro": "^0.29.1",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.0.1",
"prettier": "^3.1.1",
"prettier-plugin-astro": "^0.12.2",
"typescript": "^5.3.3"
This fix requires version 0.31.0 of eslint-plugin-astro.
thanks, i forced the update. I thought I had done it properly last night.
Just following up from this @Garmelon, in VSCode it is working fine... however when i run eslint . --ext .js,.ts,.astro it is still failing on the typescript parsing issues
If you're running eslint globally instead of via npx or similar, maybe you have an outdated version of eslint-plugin-astro installed globally as well
checked both my npm and yarn globals and there is no eslint-plugin-astro installed. Also, i set up this inside the scripts section of package.json file as lint and did a npm run lint and it has the issue.
edit...
ran with debug mode on and i can see that it does apply it... (replaced root directory with [...])... even though this is Windows output, the aspect that i had the same issue in CI means that it isn't specific to an OS.
eslint:cli-engine Lint [...]\src\components\forms\form.astro +0ms
eslint:linter Linting code for [...]\src\components\forms\form.astro (pass 1) +0ms
eslint:linter Verify +0ms
eslint:linter With ConfigArray: [...]\src\components\forms\form.astro +1ms
eslint:linter Apply the processor: 'astro/client-side-ts' +1ms
eslint:linter A code block was found: '(unnamed)' +180ms
eslint:linter Parsing: [...]\src\components\forms\form.astro +3ms
eslint:linter Parsing successful: [...]\src\components\forms\form.astro +68ms
eslint:linter Scope analysis: [...]\src\components\forms\form.astro +1ms
eslint:linter Scope analysis successful: [...]\src\components\forms\form.astro +0ms
eslint:linter A code block was found: '1.ts' +629ms
eslint:linter Resolving configuration again because the file content or extension was changed. +1ms
eslint:linter With ConfigArray: [...]\src\components\forms\form.astro\1_1.ts +0ms
eslintrc:ignore-pattern Create with: [ IgnorePattern { patterns: [ '/**/node_modules/*' ], basePath: '[...]', loose: false }, IgnorePattern { patterns: [ 'src/env.d.ts', '.github' ], basePath: '[...]', loose: true } ] +887ms
eslintrc:ignore-pattern processed: { basePath: '[...]', patterns: [ '/**/node_modules/*', 'src/env.d.ts', '.github' ] } +1ms
eslint:linter Parsing: [...]\src\components\forms\form.astro\1_1.ts +3ms
eslint:linter Parsing error: Unexpected token SupportedElement
eslint:linter SyntaxError: Unexpected token SupportedElement
at Espree.raise ([...]\node_modules\espree\dist\espree.cjs:674:25)
at Espree.unexpected [...]\node_modules\espree\dist\espree.cjs:719:18)
at pp$9.semicolon ([...]\node_modules\acorn\dist\acorn.js:749:68)
at pp$8.parseExpressionStatement ([...]\node_modules\acorn\dist\acorn.js:1238:10)
at pp$8.parseStatement ([...]\node_modules\acorn\dist\acorn.js:965:26)
at pp$8.parseTopLevel ([...]\node_modules\acorn\dist\acorn.js:829:23)
at Espree.parseTopLevel ([...]\node_modules\espree\dist\espree.cjs:662:26)
at Espree.parse ([...]\node_modules\acorn\dist\acorn.js:601:17)
at Espree.parse ([...]\node_modules\espree\dist\espree.cjs:584:35)
at Object.parse ([...]\node_modules\espree\dist\espree.cjs:834:38) +5ms
eslint:linter Generating fixed text for [...]\src\components\forms\form.astro (pass 1) +2ms
eslint:source-code-fixer Applying fixes +0ms
eslint:source-code-fixer shouldFix parameter was false, not attempting fixes +0ms
eslint:file-enumerator Complete iterating files: ["src/components/forms/form.astro"] +3s
Maybe open another issue with a minimal reproducible example then.