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

Published 20 hours ago • verified publisher icon sveltejs

BUG: Svelte for VS Code : Import Intellisense Failed for Nested Sibling Component

Open OSSRoger opened this issue 3 years ago • 10 comments

Describe the bug

Intellisense for component import does not work if the component is not in the same directory, a child directory, or a parent directory. i.e. Intellisense to import My4thComponent from My3rdComponent.svelte does not work

./src/components/My1stComponent.svelte ./src/components/My2ndComponent.svelte ./src/components/subcomponents/My3rdComponent.svelte ./src/components/othercomponents/My4thComponent.svelte

Here is a repo with a repro https://github.com/OSSRoger/svelte-import-component-intellisense-path-bug

Reproduction

Repro: Import Intellisense fails when importing My4thComponent into My3rdComponent.svelte

  1. Create a new svelte project.
  2. Create a components directory under the src directory in the project.
  3. Create a subcomponents directory under the components directory.
  4. Create an othercomponents directory under the components directory.
  5. Create a My1stComponent.svelte under the components directory.
  6. Create a My2ndComponent.svelte under the components directory.
  7. Create a My3rdComponent.svelte under the subcomponents directory.
  8. Create a My4thComponent.svelte under the othercomponents directory.
  9. Import My2ndComponent into My1stComponent.svelte and note that import intellisense is working.
  10. Import My3rdComponent into My2ndComponent.svelte and note that import intellisense is working.
  11. Attemp to import My4thComponent into My3rdComponent and note that import intellisense is NOT working. Type the following into the script block in My3rdComponent and note that intellisense never gives an option for My4thComponent
<script>
import My
</script>

i.e. Directory structure where ./ is the root of the project

./src/components/My1stComponent.svelte
./src/components/My2ndComponent.svelte
./src/components/subcomponents/My3rdComponent.svelte
./src/components/othercomponents/My4thComponent.svelte

Expected behaviour

Typing the following in the script block of My3rdComponent.svelte should display intellisense for all components that start with My including My4thComponent

System Info

  • OS: macOS Monterey 12.4, MacBook Pro M1 Pro,
  • IDE: VS Code 1.68.1 (Universal)
  • Node: v18.1.0
  • Svelte: v3.48.0

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

This might be an issue with the svelte-language-server. I'm not sure I have not debugged the issue yet. I noticed the following errors as well the second I am not sure is related.

Preprocessing failed Error: [svelte-preprocess] Encountered type error at throwError (/Users/foobar/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/modules/errors.js:5:11) at throwTypescriptError (/Users/foobar/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/modules/errors.js:9:28) at transpileTs (/Users/foobar/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/transformers/typescript.js:177:47) at mixedImportsTranspiler (/Users/foobar/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/transformers/typescript.js:232:60) at transformer (/Users/foobar/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/transformers/typescript.js:302:11) at transform (/Users/foobar/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/autoProcess.js:37:12) at async /Users/foobar/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/autoProcess.js:118:29 at async Object.script (/Users/foobar/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/autoProcess.js:148:33) at async wrappedPreprocessor.script (/Users/foobar/.vscode/extensions/svelte.svelte-vscode-105.18.1/node_modules/svelte-language-server/dist/src/plugins/svelte/SvelteDocument.js:249:28) at async process_single_tag (/Users/foobar/Developer/svelte-app-2/node_modules/svelte/compiler.js:32503:28) { __source: 'Script' } /Users/foobar/.vscode/extensions/svelte.svelte-vscode-105.18.1/node_modules/svelte-language-server/dist/src/plugins/PluginHost.js:235 throw new Error('Cannot call methods on an unopened document'); ^

Error: Cannot call methods on an unopened document at PluginHost.getDocument (/Users/foobar/.vscode/extensions/svelte.svelte-vscode-105.18.1/node_modules/svelte-language-server/dist/src/plugins/PluginHost.js:235:19) at PluginHost.getDiagnostics (/Users/foobar/.vscode/extensions/svelte.svelte-vscode-105.18.1/node_modules/svelte-language-server/dist/src/plugins/PluginHost.js:36:31) at DiagnosticsManager.update (/Users/foobar/.vscode/extensions/svelte.svelte-vscode-105.18.1/node_modules/svelte-language-server/dist/src/lib/DiagnosticsManager.js:16:40) at /Users/foobar/.vscode/extensions/svelte.svelte-vscode-105.18.1/node_modules/svelte-language-server/dist/src/server.js:291:106 at Timeout._onTimeout (/Users/foobar/.vscode/extensions/svelte.svelte-vscode-105.18.1/node_modules/svelte-language-server/dist/src/utils.js:161:13) at listOnTimeout (node:internal/timers:557:17) at processTimers (node:internal/timers:500:7) [Info - 4:06:01 AM] Connection to server got closed. Server will restart. Initialize language server at file:///Users/foobar/Developer/svelte-app-2

OSSRoger avatar Jul 03 '22 08:07 OSSRoger

The second error (Cannot call methods on an unopened document) is probably relevant. I can't reproduce this on windows. So I need some more info to narrow down the possibilities.

  1. Does this only happen when you created the file or does it also happen after you restarted the editor?
  2. Does it happen when the My4thComponent or the directory has a different name?
  3. Did you immediately close the newly created file?
  4. What exactly do you mean by importing My4thComponent not working? Does it not show anything or it does show something but there's no My4thComponent?

jasonlyu123 avatar Jul 04 '22 03:07 jasonlyu123

  1. It happened when I created the file and also after I restart the editor
  2. Changing the name of My4thComponent.svelte to My4thComponentNew.svelte no longer causes the repro. IntelliSense picks up the new name when attempting to import My4thComponent into My3rdComponent.svelte
  3. I do not remember if I immediately closed the newly created file. However renaming the file from My4thComponentNew.svelte back to My4thComponent.svelte causes the repro again. See Svelte output below.
  4. IntelliSense shows the other components that start with My but not My4thComponent. See pic.
Screen Shot 2022-07-04 at 1 55 55 PM

Svelte output when attempting to import My4thComponent using intellisense.

Using Svelte v3.48.0 from /Users/roger/Developer/svelte-app-2/node_modules/svelte/compiler
[96msrc/components/subcomponents/My3rdComponent.svelte.injected.ts[0m:[93m18[0m:[93m1[0m - [91merror[0m[90m TS1109: [0mExpression expected.

[7m18[0m const $$$$$$$$ = null;
[7m  [0m [91m~~~~~[0m

Preprocessing failed
Error: [svelte-preprocess] Encountered type error
    at throwError (/Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/modules/errors.js:5:11)
    at throwTypescriptError (/Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/modules/errors.js:9:28)
    at transpileTs (/Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/transformers/typescript.js:177:47)
    at mixedImportsTranspiler (/Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/transformers/typescript.js:232:60)
    at transformer (/Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/transformers/typescript.js:302:11)
    at transform (/Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/autoProcess.js:37:12)
    at async /Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/autoProcess.js:118:29
    at async Object.script (/Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/autoProcess.js:148:33)
    at async wrappedPreprocessor.script (/Users/roger/.vscode/extensions/svelte.svelte-vscode-105.18.1/node_modules/svelte-language-server/dist/src/plugins/svelte/SvelteDocument.js:249:28)
    at async process_single_tag (/Users/roger/Developer/svelte-app-2/node_modules/svelte/compiler.js:32503:28) {
  __source: 'Script'
}
Using Svelte v3.48.0 from /Users/roger/Developer/svelte-app-2/node_modules/svelte/compiler
[96msrc/components/subcomponents/My3rdComponent.svelte.injected.ts[0m:[93m18[0m:[93m1[0m - [91merror[0m[90m TS1005: [0m'=' expected.

[7m18[0m const $$$$$$$$ = null;
[7m  [0m [91m~~~~~[0m

Preprocessing failed
Error: [svelte-preprocess] Encountered type error
    at throwError (/Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/modules/errors.js:5:11)
    at throwTypescriptError (/Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/modules/errors.js:9:28)
    at transpileTs (/Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/transformers/typescript.js:177:47)
    at mixedImportsTranspiler (/Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/transformers/typescript.js:232:60)
    at transformer (/Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/transformers/typescript.js:302:11)
    at transform (/Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/autoProcess.js:37:12)
    at async /Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/autoProcess.js:118:29
    at async Object.script (/Users/roger/Developer/svelte-app-2/node_modules/svelte-preprocess/dist/autoProcess.js:148:33)
    at async wrappedPreprocessor.script (/Users/roger/.vscode/extensions/svelte.svelte-vscode-105.18.1/node_modules/svelte-language-server/dist/src/plugins/svelte/SvelteDocument.js:249:28)
    at async process_single_tag (/Users/roger/Developer/svelte-app-2/node_modules/svelte/compiler.js:32503:28) {
  __source: 'Script'
}

OSSRoger avatar Jul 04 '22 18:07 OSSRoger

Does the problem persist when you remove the commented-out import from MyComponent4? If not then the problem is just that. We could enhance our auto-import filtering with a more semantic approach. But I guess this might be a separate issue while you're trying to create a reproduction?

jasonlyu123 avatar Jul 05 '22 00:07 jasonlyu123

No, the problem still persists when I uncomment the import of My4thComponent. See pic showing that IntelliSense cannot find My4thComponent with the import uncommented. I'm not sure I following your last question. Please clarify if there is anything else you need from me.

Screen Shot 2022-07-05 at 12 00 05 AM

BTW I just added the following line of code to line 176 of /node_modules/svelte-preprocess/dist/transformers/typescript.js

throw new Error(formattedDiagnostics);

The following new information was returned in svelte output.

Preprocessing failed
Error: [96msrc/components/subcomponents/My3rdComponent.svelte.injected.ts[0m:[93m18[0m:[93m1[0m - [91merror[0m[90m TS1005: [0m'=' expected.

OSSRoger avatar Jul 05 '22 04:07 OSSRoger

BTW if I remove the lang='ts' attribute from the opening script tag the issue does not repro. And there are no more exception messages in the Svelte output. See screenshot. Screen Shot 2022-07-05 at 12 35 19 AM

OSSRoger avatar Jul 05 '22 04:07 OSSRoger

Would it be possible to send pointer to a custom branch of svelte-preprocess that has additional instrumentation that dumps the intermediate src/components/subcomponents/My3rdComponent.svelte.injected.ts file so that we can determine what the "TS1005: �[0m'=' expected." issue is?

OSSRoger avatar Jul 05 '22 04:07 OSSRoger

You misunderstood. I mean remove the commented-out import. Not uncomment it. If you already have the import it definitely shouldn't suggest an auto import. We have a check for existing imports and the commented-out import would cause the auto-import to be filtered out.

The svelte-preprocess error is expected. As the uncompleted import isn't valid js. So you can safely ignore that.

if you remove the lang="ts". Typescript would suggest by the symbol of the file. Like the paper icon in your screenshot. So no. that doesn't solve the problem.

I am not sure what is your original problem. But I guess you might have created a wrong reproduction because of the commented-out issue. Because what you described is far more complex. I want to make sure the root problem isn't the commented-out import.

jasonlyu123 avatar Jul 05 '22 04:07 jasonlyu123

If I remove the commented out import the issue no longer repros.

OSSRoger avatar Jul 05 '22 05:07 OSSRoger

I have other repros where Intellisense for import is not working but the projects are much larger and I don't know how I got to a state where Intellisense stopped working.

OSSRoger avatar Jul 05 '22 05:07 OSSRoger

Is this bug related to my issue? Here everything is correct but vs code still complains.

image image

harryqt avatar Jul 11 '22 13:07 harryqt

Closing due to inactivity and lack of reproduction

dummdidumm avatar Dec 09 '22 15:12 dummdidumm