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 runes not working as class fields in packages in "with-svelte" template #10113

Open
1 task done
maxfriedmann opened this issue Mar 6, 2025 · 1 comment
Open
1 task done
Assignees
Labels
area: examples Improvements or additions to examples kind: bug Something isn't working

Comments

@maxfriedmann
Copy link

maxfriedmann commented Mar 6, 2025

Verify canary release

  • I verified that the issue exists in the latest Turborepo canary release.

Link to code that reproduces this issue

https://github.com/smallstack/turborepo/blob/main/examples/with-svelte/packages/ui/sample-class.svelte.ts

Which canary version will you have in your reproduction?

2.4.4

Enviroment information

turbo 2.4.4

CLI:
   Version: 2.4.4
   Path to executable: ~\turborepo\examples\with-svelte\node_modules\turbo-windows-64\bin\turbo.exe
   Daemon status: Running
   Package manager: pnpm

Platform:
   Architecture: x86_64
   Operating system: windows
   WSL: false
   Available memory (MB): 8794
   Available CPU cores: 20

Environment:
   CI: None
   Terminal (TERM): unknown
   Terminal program (TERM_PROGRAM): vscode
   Terminal program version (TERM_PROGRAM_VERSION): 1.98.0
   Shell (SHELL): unknown
   stdin: false

Expected behavior

I would expect packages/{name}/**/*.svelte.ts files getting preprocesses in the same way they do in regular svelte apps.

Actual behavior

✗ Build failed in 313ms
│ error during build:
│ [vite-plugin-svelte-module] [plugin vite-plugin-svelte-module] ../../packages/ui/sample-class.svelte.ts (4:22): ~/turborepo/examples/with-svelte/packages/ui/sample-class.svelte.ts:4:22 `$state(...)` can only be used as a variable declaration initializer or a class field
│ https://svelte.dev/e/state_invalid_placement
│ file: ~/turborepo/examples/with-svelte/packages/ui/sample-class.svelte.ts:4:22
│
│  2 |  export class SampleClass {
│  3 |    constructor() {
│  4 |      this.classState = $state("test");
│                                           ^
│  5 |    }
│  6 |    // does not work
│
│
│  ELIFECYCLE  Command failed with exit code 1.

To Reproduce

Create a ts file in a package with this content:

export const moduleState = $state("test"); // works

export class SampleClass {
  public classState = $state("test"); // does not work
}

Additional context

It does work in the app folders

@maxfriedmann maxfriedmann added kind: bug Something isn't working needs: triage New issues get this label. Remove it after triage labels Mar 6, 2025
@maxfriedmann maxfriedmann changed the title Svelte runes not working as class fields in "with-svelte" template Svelte runes not working as class fields in packages in "with-svelte" template Mar 6, 2025
@maxfriedmann
Copy link
Author

maxfriedmann commented Mar 7, 2025

As a workaround I added the following file: https://github.com/smallstack/turborepo/blob/main/examples/with-svelte/packages/tsconfig.json

Now the classes in *.svelte.ts files compile.

I am not really into the compile process of svelte(kit) or turbo, but as far as I read in the turbo docs, the settings from the app that uses the JIT package are used to compile the code, so why does it only work with an extra tsconfig.json in /packages?

@anthonyshew anthonyshew added area: examples Improvements or additions to examples and removed needs: triage New issues get this label. Remove it after triage labels Mar 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: examples Improvements or additions to examples kind: bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants