Svelte : Importing component dynamically is not working

Question

I'd like to insert component dynamically. But, it fails. Could you someone please tell me about it and advice to solve this? REPL is here.

<script>
let Chatbox;
function loadChatbox() {
    // this is available.
    // import('./ChatBox.svelte').then(res => Chatbox = res.default)
    // but, this is not. Why?? and How to make it??
    const name = './ChatBox.svelte';
    import(name).then(res => Chatbox = res.default)
}
</script>
<button on:click="{loadChatbox}">Load chatbox</button>
<svelte:component this="{Chatbox}" />

Ari Shojaei · Accepted Answer · 2020-12-20 07:55:00Z

0

Why are you trying to separate the component path? I believe if you just change your code to this it would work.

import('./ChatBox.svelte').then(res => Chatbox = res.default)

see Dynamically loading component using import or fetch

edited Dec 20, 2020 at 7:55

answered Dec 20, 2020 at 7:41

Ari Shojaei

3595 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vas Mani Over a year ago

Thanks for your reply. I edited my code. I need to use a variable to import dynamically.

bob · Accepted Answer · 2020-12-20 08:31:55Z

0

Try adding "await":

<script>
let Chatbox;
async function loadChatbox() { // need to make this an async function too
    // this is available.
    // import('./ChatBox.svelte').then(res => Chatbox = res.default)
    // but, this is not. Why?? and How to make it??
    const name = './ChatBox.svelte';
    (await import(name)).then(res => Chatbox = res.default) // added await
}
</script>
<button on:click="{loadChatbox}">Load chatbox</button>
<svelte:component this="{Chatbox}" />

answered Dec 20, 2020 at 8:31

bob

8,0232 gold badges51 silver badges44 bronze badges

Comments

Vas Mani · Accepted Answer · 2020-12-20 10:10:14Z

0

I found the solution : https://stackoverflow.com/a/36530495/14858601

// index.js
export { default as Template1 } from './Template1';
export { default as Template2 } from './Template2';


// OtherComponent.js
import * as templates from './index.js'
...
// handy to be able to fall back to a default!
return templates[name] || templates.Template1;

answered Dec 20, 2020 at 10:10

Vas Mani

12 bronze badges

Collectives™ on Stack Overflow

Svelte : Importing component dynamically is not working

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related