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

$lib alias does not work while dynamically importing a component when using string interpolation #4982

Closed
jhubbardsf opened this issue May 18, 2022 · 2 comments

Comments

@jhubbardsf
Copy link
Contributor

jhubbardsf commented May 18, 2022

Describe the bug

A dynamically imported component, with a variable in the path, breaks if using the $lib alias. Example below:

<script lang='ts'>
    import { onMount } from "svelte";

    let TestComponent: any;
    const componentName = 'TestComponent.svelte';
    onMount(async ()=>{
        TestComponent = (await import(`../lib/${componentName}`)).default; // THIS WORKS
        // TestComponent = (await import(`$lib/${componentName}`)).default; // THIS DOES NOT WORK
    });
    
</script>

<svelte:component this={TestComponent}/>

Reproduction

Create a new SvelteKit app. Create a TestComponent.svelte file with something in it. Try to dynamically import the component using string interpolation in the path.

Logs

importTest.svelte? [sm]:8 Uncaught (in promise) TypeError: Failed to resolve module specifier '$lib/TestComponent.svelte'
    at importTest.svelte? [sm]:8:47
    at run (index.mjs:18:12)
    at Array.map (<anonymous>)
    at index.mjs:1816:45
    at flush (index.mjs:1075:17)
    at init (index.mjs:1908:9)
    at new Root (root.svelte? [sm]:16:25)
    at createProxiedComponent (svelte-hooks.js:341:9)
    at new ProxyComponent (proxy.js:242:7)
    at new Proxy<Root> (proxy.js:349:11)

System Info

System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 109.64 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.6.0 - ~/.nvm/versions/node/v17.6.0/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.5.1 - ~/.nvm/versions/node/v17.6.0/bin/npm
  Browsers:
    Brave Browser: 101.1.38.111
    Chrome: 101.0.4951.64
    Firefox: 96.0.3
    Firefox Developer Edition: 98.0
    Safari: 15.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.43
    @sveltejs/kit: next => 1.0.0-next.335
    svelte: ^3.46.0 => 3.48.0

Severity

serious, but I can work around it

Additional Information

No response

@jhubbardsf jhubbardsf changed the title $lib alias does not work while dynamically importing a component when there is a variable used in the name $lib alias does not work while dynamically importing a component when using string interpolation May 18, 2022
@dummdidumm
Copy link
Member

Probably a Vite thing

@bluwy
Copy link
Member

bluwy commented May 19, 2022

This will be supported in Vite 3 from vitejs/vite#7756

@bluwy bluwy closed this as completed May 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants