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 Monorepo auto import broken in svelte files. #2705

Open
Autumnlight02 opened this issue Mar 7, 2025 · 17 comments
Open

Svelte Monorepo auto import broken in svelte files. #2705

Autumnlight02 opened this issue Mar 7, 2025 · 17 comments
Labels
bug Something isn't working

Comments

@Autumnlight02
Copy link

Describe the bug

Basically svelte only import ts and svelte functions once on vscode load and you have to reload vscode to get new imports or changed imports (e.g. you modify types of a function and you need to reload so it's reflected)
This neither works with build or no build.
No build has an additional issue that you can auto import in ts files, not in svelte files. and that if you import it once in a ts file then you can import it via relative path.

Reproduction

Made a custom repo
https://github.com/Autumnlight02/monorepo-issues

Expected behaviour

It just imports them simila rto how ts works

System Info

System:
    OS: Linux 6.12 Fedora Linux 41 (Toolbx Container Image)
    CPU: (16) x64 AMD Ryzen 7 5700X 8-Core Processor
    Memory: 96.57 GB / 125.71 GB
    Container: Yes
    Shell: 5.2.32 - /bin/bash
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: 10.5.2 - ~/.nvm/versions/node/v22.14.0/bin/pnpm
    bun: 1.2.4 - ~/.bun/bin/bun

vscodium: 1.97.2
Extensions: prettier, pretty typescript errors, svetle for vscode, grammarly, indent-rainbow, vue - official, symbols (/ icon themes), mdx support

Which package is the issue about?

No response

Additional Information, eg. Screenshots

Either Svelte for vscode or general language server issues

@Autumnlight02 Autumnlight02 added the bug Something isn't working label Mar 7, 2025
@jasonlyu123
Copy link
Member

Did you open both projects in separate vscode windows? We currently only watch files matching the include pattern in your tsconfig.json and the directory where you open the editor. If I open one editor, I see the same behaviour in ts/svelte files. If you have imported the file at least once, the update will be reflected. If you haven't imported the file, both ts/svelte don't suggest auto-import from the file.

@Autumnlight02
Copy link
Author

No, I had it open either at broken_svelte-no-import or working_ts-monorepo
If my config is the issue could you help me to resolve this? Also the way how I can import any ts file in project ts-export. Would be the same possible with svelte as well (w autoimport?)
Ive tried now for months to fix this but came so far to no conclusion

@jasonlyu123
Copy link
Member

I am unsure I understand the problem since I saw the same behaviour in broken_svelte-no-import and working_ts-monorepo. Can you explain in more detail what exactly the difference is? I did see the comment in the files, but a lot of them don't work in the ts file or even working_ts-monorepo either, so I don't know what exactly the difference is.

@jasonlyu123
Copy link
Member

jasonlyu123 commented Mar 10, 2025

Ah. I know why I can't reproduce the difference. I disabled the typescript.preferences.includePackageJsonAutoImports config probably to test out its behaviour when investigating another issue. The problem has something to do with this package.json auto import. We were using a port of TypeScript's package.json auto import, but TypeScript added a new feature to collect auto-import from the package.json wildcard entry. The port doesn't have this feature yet.

Were you also having problems with existing files in the package not being updated? I am not sure what this comment meant.

//Try to add a new file under /ts-export/src/myFile.ts and export it and import it here without reloading

@Autumnlight02
Copy link
Author

Yeah basically lets say I apply that in package export. I have an issue that when I want to import the file it sometimes is not hot reloaded by ts server, it's flaky.

But if you generally know of any other way on how to do the following I would be grateful:
Basically have 2 Repos. In Repo 1 add svelte files, In repo 2 import them without build or restarting vscode

@Autumnlight02
Copy link
Author

Would you like me to record a video of what's happening vs expected?

@jasonlyu123
Copy link
Member

jasonlyu123 commented Mar 10, 2025

Yeah. Please. There seem to be two problems here, but I don't understand what the second one is. I only understand the problem with the never-imported module, but it shouldn't work even if you restart the editor.

Also, does go-to-definition on the import for the shared libary take you to the source file? Or a file path with node_modules in it?

@Autumnlight02
Copy link
Author

@jasonlyu123 sorry for the delay, was sick in bed.

Working ts example:

Kooha-2025-03-13-11-26-33.webm

Broken svelte example:

Kooha-2025-03-13-11-28-30.webm

My end goal is that I can create a file in repo 1 and just import it in repo 2 without having to build anything / restart vscode (with import support)

@Autumnlight02
Copy link
Author

Ah, and regarding definitions, it appears as if it refferences it directly (the file)

Image

Kooha-2025-03-13-11-32-35.webm

Another thing is, that I would like to have the option to not only import ts files, but svelte files as well. (basically that the ts-exports repo has svelte components I can import in my svelte vite / svelte kit app

@jasonlyu123
Copy link
Member

I understand this part. What I want to know is this

you modify types of a function and you need to reload so it's reflected

@Autumnlight02
Copy link
Author

Oh, basically when I tried in a different repo a version with build and a single file as exports, it basically only scanned what the file exports on vscode load, and then let's say I rename a function, cahnge the output from number to boolean and rebuild the package, vscode intellense still would see the old package instead of the new one.

@Autumnlight02
Copy link
Author

@jasonlyu123 Do you happen to know of a different way on archieving what I want?

@jasonlyu123
Copy link
Member

One workaround is to add the share package to the include of the tsconfig.app.json of your svelte app and add an alias to the paths that points to the shared package.

{
  "compilerOptions": {
    ..
   "paths": {
      "ts-export/*": ["../ts-export/*"]
    }
  }
  "include": [
      ...
      "../ts-export/src/**/*.ts"
   ]
}

@Autumnlight02
Copy link
Author

@jasonlyu123 Sadly that does not with svelte components cross repos. Example. copy the svelte vite folder, call it something like 2 and try ts files. They Work. App.svelte also seems to work. But I added as a Test a "Gaga.svelte" with a div element as content. And I fialed to import that in svelte-vite even after the ts config + adding it to package.json

@Autumnlight02
Copy link
Author

It only shows up in "svelte-vite" if I import my new Gaga.svelte into App.svelte in "svelte-vite-2"

@jasonlyu123
Copy link
Member

The include config I listed is just an example. If you want Svelte and js files, you can add the corresponding pattern to the include config. Have you added svelte files to the include config? I tried, and it works with new files.

@Autumnlight02
Copy link
Author

Oh, yeah that worked. Thank you <3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants