Svelte component async loading in version 3

Question

I would like to ask you a question about updating a simple example from version 2 to version 3.

This example of svelte v2 async component loading works (https://codesandbox.io/s/0ooo3z8nqp), but this one written for v3 doesn't (https://codesandbox.io/s/615zv3xp33).

Any clue? Thanks!

Update: My question was about converting the following piece of code from Svelte V2 to V3.

<script>
    export default {
      components: {},
      data() {
        return {
          ChatBox: null
        };
      },
      methods: {
        async loadChatbox() {
          const { default: ChatBox } = await import("./Chatbox.html");
          this.set({ ChatBox });
        }
      }
    };
</script>

Tholle · Accepted Answer · 2019-05-06 21:56:30Z

5

In version 3 of Svelte you can assign a new value to the variable directly without using set.

You can name the default to something other than ChatBox so that the outer variable isn't shadowed, and then assign directly to it.

let ChatBox;

async function loadChatBox() {
  const { default: Component } = await import("./ChatBox.svelte");
  ChatBox = Component;
}

answered May 6, 2019 at 21:56

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

Collectives™ on Stack Overflow

Svelte component async loading in version 3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related