Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

svelte parsing error in template literals #346

Open
2 tasks done
AdrianGonz97 opened this issue May 28, 2023 · 3 comments
Open
2 tasks done

svelte parsing error in template literals #346

AdrianGonz97 opened this issue May 28, 2023 · 3 comments
Labels
bug Something isn't working help wanted Extra attention is needed workaround-available

Comments

@AdrianGonz97
Copy link
Member

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.41.0

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

2.29.0

What did you do?

Configuration
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>

What did you expect to happen?

I migrated over to this plugin from the now deprecated eslint-plugin-svelte3. The previous one didn't throw this parsing error.

What actually happened?

/parsing-error-eslint-plugin-svelte/src/routes/+page.svelte
  11:45  error  Parsing error: ')' expected

✖ 1 problem (1 error, 0 warnings)

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/AdrianGonz97/parsing-error-eslint-plugin-svelte

Additional comments

No response

@ota-meshi ota-meshi added the bug Something isn't working label May 29, 2023
@ota-meshi
Copy link
Member

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>`}

@ota-meshi ota-meshi added the help wanted Extra attention is needed label May 29, 2023
@baseballyama
Copy link
Member

This is parser issue, so I will transfer this issue to svelte-eslint-parser.

@Leftium
Copy link

Leftium commented Jan 16, 2024

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:

image

This code is imported from SkeletonUI: https://github.com/skeletonlabs/skeleton/blob/c2700cba8dd3ad71ab74c22603a94a598d485b81/packages/skeleton/src/lib/utilities/LightSwitch/LightSwitch.svelte#L76-L77

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working help wanted Extra attention is needed workaround-available
Projects
None yet
Development

No branches or pull requests

4 participants