svelte parsing error in template literals
#346Add light switch component to layout, which is initialized to OS preference. @FelixNgFender @chezzijr
8.41.0
eslint-plugin-svelte
are you using? 2.29.0
module.exports = {
root: true,
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:svelte/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
extraFileExtensions: ['.svelte']
},
env: {
browser: true,
es2017: true,
node: true
},
overrides: [
{
files: ['*.svelte'],
parser: 'svelte-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser'
}
}
]
};
<script>
let workaround = setInitialClassState.toString();
function setInitialClassState() {
// does something
}
</script>
<svelte:head>
<!-- This causes the new eslint-plugin-svelte to throw a parsing error -->
{@html `<script nonce="%sveltekit.nonce%">(${setInitialClassState.toString()})();</script>`}
<!-- This is works -->
{@html `<script nonce="%sveltekit.nonce%">(` + workaround + `)();</script>`}
</svelte:head>
I migrated over to this plugin from the now deprecated eslint-plugin-svelte3
. The previous one didn't throw this parsing error.
/parsing-error-eslint-plugin-svelte/src/routes/+page.svelte
11:45 error Parsing error: ')' expected
ā 1 problem (1 error, 0 warnings)
https://github.com/AdrianGonz97/parsing-error-eslint-plugin-svelte
No response
Thank you for posting the issue and sharing the repo to reproduce. But it's hard to fix. We probably need to rewrite the parser.
As a workaround, I think the following code will work fine.
{@html `<\u{73}cript nonce="%sveltekit.nonce%">(${setInitialClassState.toString()})();</script>`}
This is parser issue, so I will transfer this issue to svelte-eslint-parser
.
As a workaround, I think the following code will work fine.
{@html `<\u{73}cript nonce="%sveltekit.nonce%">(${setInitialClassState.toString()})();</script>`}
@ota-meshi : this workaround no longer seems to work with Svelte5. It renders as text instead of a script tag:
This code is imported from SkeletonUI: https://github.com/skeletonlabs/skeleton/blob/c2700cba8dd3ad71ab74c22603a94a598d485b81/packages/skeleton/src/lib/utilities/LightSwitch/LightSwitch.svelte#L76-L77
@Leftium it seems to work fine in svelte5
{@html `<\u{73}cript type="application/ld+json">${JSON.stringify(metadata)}</script>`}
@mustafa0x Yes! It was fixed in Svelte5: sveltejs/svelte#10359