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 Tholle · Accepted Answer · 2019-05-06T21:56:30

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

Svelte component async loading in version 3

1 Answers