language-tools icon indicating copy to clipboard operation
language-tools copied to clipboard

When using VSCode to import a svelte component it imports using the old `require` syntax instead of the new `import` syntax

Open selenecodes opened this issue 1 year ago • 2 comments

Describe the bug

When using VSCode to import a svelte component it imports using the old require syntax instead of the new import syntax. This is incorrect and causes npm run dev to not show anything in the browser except for a console error.

Reproduction

  1. Go to +page.svelte
  2. Try to import Home.svelte
  3. Witness it importing the component using require (and causing a crash during npm dev)

Reproduction github link: https://github.com/selenecodes/sveltekit-language-server-incorrect-import

Expected behaviour

  • Import the Home.svelte component using the import syntax

System Info

  • OS: MacOS and Windows 10
  • IDE: VSCode

Which package is the issue about?

Svelte for VS Code extension, svelte-language-server

Additional Information, eg. Screenshots

image

https://github.com/sveltejs/language-tools/assets/20491756/02f61276-9c80-492f-8e63-82867e5a0d4d

selenecodes avatar Nov 29 '23 15:11 selenecodes

Correction: Seems to work fine when importing svelte components into other svelte components. The issue is purely with importing svelte components into +page.svelte (haven't tried with +layout.svelte)

selenecodes avatar Nov 29 '23 15:11 selenecodes

This should only happen in cases where the module format is not apparent. For example, In files without any import and in a template parser error state. In that case, TypeScript will check the module in the tsconfig.json but with some internal state that our implementation won't have. Then, it'll check for js files in the program that have an apparent module format. So a js file with only export {} should stop it. But I am not really sure we want to add that virtually behind the scenes.

jasonlyu123 avatar Jan 26 '24 06:01 jasonlyu123

It seems like TypeScript tweaked the logic in an unrelated change in TypeScript 5.5. Some logic in that "should use require check" was changed from a property where we can mark as js/ts to using the file extension. So now svelte file will always use import instead of require.

And we might change the logic on config loading to use the method with the internal state I mentioned before. So even if the unrelated logic changes again it should still not happen.

jasonlyu123 avatar Aug 20 '24 06:08 jasonlyu123