Svelte 5 context module export class with state rune error

[gert-wijns]

Describe the bug

Exporting a class with a state rune from a .svelte file using a context="module" script causes compilation errors in some cases.

Reproduction

• git clone https://github.com/gert-wijns/svelte_5_context_module_bug.git
• cd svelte_5_context_module_bug
• npm install
• npm run check

Error: $state() can only be used as a variable declaration initializer or a class field (svelte)
export class Foo {
value = $state()
}

Additional info:
These are the steps I took:
I created a new project using
npm create svelte@latest my-app
Skeleton project
Typescript syntax
Svelte 5 preview

Then I updated the svelte version in package.json to ^5.0.0-next.27 (it's initially just 1)

Then I open the project in vscode, npm install and check.
npm run check -> no errors

Then I added this to +page.svelte:

<script lang="ts" context="module"> export class Foo { value = $state("I'm a value ") } </script>

npm run check -> no errors

Then I added a second file next to it, Test.svelte, containing the same code
npm run check -> I get the error about $state
c:\Personal\workspaces\Test\my-app\src\routes\Test.svelte:3:17
Error: $state() can only be used as a variable declaration initializer or a class field (svelte)
export class Foo {
value = $state("I'm a value ")
}

Then I went back and removed the content of the script tag in +page.ts (but left the empty script tag)
npm run check -> Still an error about $state

Then I removed the script tag from +page.svelte entirely (leaving only the script tag in Test.svelte with the class and rune)
npm run check -> no errors

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
    Memory: 5.20 GB / 31.72 GB
  Binaries:
    Node: 20.8.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1265.0), Chromium (120.0.2210.61)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: ^5.0.0-next.27 => 5.0.0-next.27

Severity

annoyance

[gtm-nayan]

This was "fun" to track down,

The preprocessor is changing the value = $state() to constructor() { this.value = $state() }

and why it doesn't occur on +page.svelte seems to be a bug in tsconfck where the two files are getting different configs, I thought it'd be fixed by https://github.com/dominikg/tsconfck/pull/150/files but I patched my node_modules with the changes there and it didn't seem to work so may be something different (cc @dominikg)

for +page.svelte

{
 "loadedTsconfig": {
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
   "allowJs": true,
   "checkJs": true,
   "esModuleInterop": true,
   "forceConsistentCasingInFileNames": true,
   "resolveJsonModule": true,
   "skipLibCheck": true,
   "sourceMap": true,
   "strict": true,
   "moduleResolution": "bundler"
  }
 },
 "filename": "/home/ciri/sveltejs/v5-pg/src/routes/+page.svelte"
}

and for Test.svelte

{
 "loadedTsconfig": {
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
   "allowJs": true,
   "checkJs": true,
   "esModuleInterop": true,
   "forceConsistentCasingInFileNames": true,
   "resolveJsonModule": true,
   "skipLibCheck": true,
   "sourceMap": true,
   "strict": true,
   "moduleResolution": "bundler",
   "paths": {},
   "rootDirs": [
    ".",
    ".svelte-kit/types"
   ],
   "verbatimModuleSyntax": true,
   "isolatedModules": true,
   "lib": [
    "esnext",
    "DOM",
    "DOM.Iterable"
   ],
   "module": "esnext",
   "noEmit": true,
   "target": "esnext"
  },
  "include": [
   ".svelte-kit/ambient.d.ts",
   ".svelte-kit/non-ambient.d.ts",
   ".svelte-kit/types/**/$types.d.ts",
   "vite.config.js",
   "vite.config.ts",
   "src/**/*.js",
   "src/**/*.ts",
   "src/**/*.svelte",
   "tests/**/*.js",
   "tests/**/*.ts",
   "tests/**/*.svelte"
  ],
  "exclude": [
   "node_modules/**"
  ]
 },
 "filename": "/home/ciri/sveltejs/v5-pg/src/routes/Test.svelte"
}

[gtm-nayan]

I don't completely know what's going on over there,

but I had a hunch that copying https://github.com/dominikg/tsconfck/blob/cdc7df60eea723a72e12851306e05bf0fc0ca641/packages/tsconfck/src/parse.js#L33C3-L43C4

to

https://github.com/dominikg/tsconfck/blob/cdc7df60eea723a72e12851306e05bf0fc0ca641/packages/tsconfck/src/parse.js#L62

would do something and that seems to fix it...

[dominikg]

the tsconfck update in vite vitejs/vite#15502 has not been released yet. vite bundles tsconfck so you can't get it manually.

or is tsconfck used elsewhere ?

[gtm-nayan]

the one bundled in the old version of vite, i edited that with the changes from those PRs

[dominikg]

did you also remove this shortcut in vite? https://github.com/vitejs/vite/pull/15502/files#diff-6d149ac9706cd508b52db0c059a0f01d670620a9a5a73cd7b122ce62b6b69471L447

[gtm-nayan]

yup

diff --git a/dist/node/chunks/dep-V3BH7oO1.js b/dist/node/chunks/dep-V3BH7oO1.js
index 628c10d380dd760b1f5f54baddbaa37747b335d6..e909c7d1be830fb86bc50d853e77f8fa1c3c9931 100644
--- a/dist/node/chunks/dep-V3BH7oO1.js
+++ b/dist/node/chunks/dep-V3BH7oO1.js
@@ -13941,7 +13941,19 @@ async function parse$f(filename, options) {
 	/** @type {import('./cache.js').TSConfckCache} */
 	const cache = options?.cache;
 	if (cache?.hasParseResult(filename)) {
-		return cache.getParseResult(filename);
+		const result = await cache.getParseResult(filename);
+		if (
+			(result.tsconfig.extends && !result.extended) ||
+			(result.tsconfig.references && !result.referenced)
+		) {
+			const promise = Promise.all([
+				parseExtends(result, cache),
+				parseReferences(result, options)
+			]).then(() => result);
+			cache.setParseResult(filename, promise);
+			await promise;
+		}
+		return result;
 	}
 	const {
 		resolve,
@@ -13965,11 +13977,10 @@ async function parse$f(filename, options) {
 			await Promise.all([parseExtends(result, cache), parseReferences(result, options)]);
 		}
 		resolve(resolveSolutionTSConfig(filename, result));
-		return promise;
 	} catch (e) {
 		reject(e);
-		return promise;
 	}
+  return promise;
 }
 
 /**
@@ -14119,23 +14130,24 @@ async function parseExtends(result, cache) {
  * @returns {string}
  */
 function resolveExtends(extended, from) {
+	if (extended === '..') {
+		// see #149
+		extended = '../tsconfig.json';
+	}
+	const req = createRequire(from);
 	let error;
-
 	try {
-		return createRequire$2(from).resolve(extended);
+		return req.resolve(extended);
 	} catch (e) {
 		error = e;
 	}
-
-	if (!path$o.isAbsolute(extended) && !extended.startsWith('./') && !extended.startsWith('../')) {
+	if (extended[0] !== '.' && !path.isAbsolute(extended)) {
 		try {
-			const fallbackExtended = path$o.join(extended, 'tsconfig.json');
-			return createRequire$2(from).resolve(fallbackExtended);
+			return req.resolve(`${extended}/tsconfig.json`);
 		} catch (e) {
 			error = e;
 		}
 	}
-
 	throw new TSConfckParseError(
 		`failed to resolve "extends":"${extended}" in ${from}`,
 		'EXTENDS_RESOLVE',
@@ -14774,15 +14786,7 @@ function prettifyMessage(m, code) {
 let tsconfckCache;
 async function loadTsconfigJsonForFile(filename) {
     try {
-        if (tsconfckCache) {
-            // shortcut, the cache stores resolved TSConfckParseResult
-            // so getting it from the cache directly we bypass async fn call wrapping it in a promise again
-            if (tsconfckCache.hasParseResult(filename)) {
-                const result = await tsconfckCache.getParseResult(filename);
-                return result.tsconfig;
-            }
-        }
-        else {
+        if (!tsconfckCache) {
             tsconfckCache = new TSConfckCache();
         }
         const result = await parse$f(filename, {

and then this fixes the inconsistent results

diff --git a/dist/node/chunks/dep-V3BH7oO1.js b/dist/node/chunks/dep-V3BH7oO1.js
index 628c10d380dd760b1f5f54baddbaa37747b335d6..738344d40dbed062acac7a2e78aa55635963c1c1 100644
--- a/dist/node/chunks/dep-V3BH7oO1.js
+++ b/dist/node/chunks/dep-V3BH7oO1.js
@@ -13941,7 +13941,19 @@ async function parse$f(filename, options) {
 	/** @type {import('./cache.js').TSConfckCache} */
 	const cache = options?.cache;
 	if (cache?.hasParseResult(filename)) {
-		return cache.getParseResult(filename);
+		const result = await cache.getParseResult(filename);
+		if (
+			(result.tsconfig.extends && !result.extended) ||
+			(result.tsconfig.references && !result.referenced)
+		) {
+			const promise = Promise.all([
+				parseExtends(result, cache),
+				parseReferences(result, options)
+			]).then(() => result);
+			cache.setParseResult(filename, promise);
+			await promise;
+		}
+		return result;
 	}
 	const {
 		resolve,
@@ -13960,16 +13972,26 @@ async function parse$f(filename, options) {
 		let result;
 		if (filename !== tsconfigFile && cache?.hasParseResult(tsconfigFile)) {
 			result = await cache.getParseResult(tsconfigFile);
+      if (
+        (result.tsconfig.extends && !result.extended) ||
+        (result.tsconfig.references && !result.referenced)
+      ) {
+        const promise = Promise.all([
+          parseExtends(result, cache),
+          parseReferences(result, options)
+        ]).then(() => result);
+        cache.setParseResult(filename, promise);
+        await promise;
+      }
 		} else {
 			result = await parseFile$1(tsconfigFile, cache, filename === tsconfigFile);
 			await Promise.all([parseExtends(result, cache), parseReferences(result, options)]);
 		}
 		resolve(resolveSolutionTSConfig(filename, result));
-		return promise;
 	} catch (e) {
 		reject(e);
-		return promise;
 	}
+  return promise;
 }
 
 /**
@@ -14119,23 +14141,24 @@ async function parseExtends(result, cache) {
  * @returns {string}
  */
 function resolveExtends(extended, from) {
+	if (extended === '..') {
+		// see #149
+		extended = '../tsconfig.json';
+	}
+	const req = createRequire(from);
 	let error;
-
 	try {
-		return createRequire$2(from).resolve(extended);
+		return req.resolve(extended);
 	} catch (e) {
 		error = e;
 	}
-
-	if (!path$o.isAbsolute(extended) && !extended.startsWith('./') && !extended.startsWith('../')) {
+	if (extended[0] !== '.' && !path.isAbsolute(extended)) {
 		try {
-			const fallbackExtended = path$o.join(extended, 'tsconfig.json');
-			return createRequire$2(from).resolve(fallbackExtended);
+			return req.resolve(`${extended}/tsconfig.json`);
 		} catch (e) {
 			error = e;
 		}
 	}
-
 	throw new TSConfckParseError(
 		`failed to resolve "extends":"${extended}" in ${from}`,
 		'EXTENDS_RESOLVE',
@@ -14774,15 +14797,7 @@ function prettifyMessage(m, code) {
 let tsconfckCache;
 async function loadTsconfigJsonForFile(filename) {
     try {
-        if (tsconfckCache) {
-            // shortcut, the cache stores resolved TSConfckParseResult
-            // so getting it from the cache directly we bypass async fn call wrapping it in a promise again
-            if (tsconfckCache.hasParseResult(filename)) {
-                const result = await tsconfckCache.getParseResult(filename);
-                return result.tsconfig;
-            }
-        }
-        else {
+        if (!tsconfckCache) {
             tsconfckCache = new TSConfckCache();
         }
         const result = await parse$f(filename, {