svelte-import-component-intellisense-path-bug Svelte Themes

Svelte Import Component Intellisense Path Bug

This is a reproduction of the Svelte import component intellisense bug regarding paths that are not parents or children of the current component.

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

Intellisense for component import does not work if the component is not in the same directory, a child directory, or a parent directory.

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
    

Optional

BTW Running the following is optional as the issue still repros with or without typescript.

node scripts/setupTypeScript.js

Note

I tried reproducing the issue with only three components. I eliminated the My2ndComponent and renamed My3rdComponent to My2ndComponent and My4thComponent to My3rdComponent. When attempting to import My3rdComponent into My2ndComponent the issue didn't repro. i.e.

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

System Info

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

Error Output for Svelte

The following output is generated by Svelte when typeing "import My" into the My3rd Component.

Using Svelte v3.48.0 from /Users/foobar/Developer/svelte-app-2/node_modules/svelte/compiler
src/components/subcomponents/My3rdComponent.svelte.injected.ts:17:1 - error TS1005: '=' expected.

17 const $$$$$$$$ = null;
   ~~~~~

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'
}

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes