How to use in Vue3 project?

[0604hx]

Hi, I create a vue3 project with vite2, code like this:

<template>
    <component :is="remoteComp"></component>
</template>

<script>
    import { defineAsyncComponent, getCurrentInstance } from 'vue'
    import { loadModule } from 'vue3-sfc-loader'

    /* <!-- */
    let content = `
            <template>
                <div class="dtDiv">
                    Hello, 这个是动态页面噢
                </div>
            </template>
    `;
    /* --> */

    export default {
        computed: {
            remoteComp (){
                let app = getCurrentInstance()
                return defineAsyncComponent(()=>loadModule(`Dys.vue`, {
                    moduleCache:{
                        vue: app
                    },
                    getFile(url) {
                        return Promise.resolve(content)
                    },

                    addStyle() { /* unused here */ },
                }))
            }
        }
    }
</script>

But it does not work, got error:

Uncaught (in promise) TypeError: (0 , _vue.openBlock/createTextNode) is not a function

So how can I create component from String, Thanks much!

[qq617564112]

Hi, I create a vue3 project with vite2, code like this:

<template>
    <component :is="remoteComp"></component>
</template>

<script>
    import { defineAsyncComponent, getCurrentInstance } from 'vue'
    import { loadModule } from 'vue3-sfc-loader'

    /* <!-- */
    let content = `
            <template>
                <div class="dtDiv">
                    Hello, 这个是动态页面噢
                </div>
            </template>
    `;
    /* --> */

    export default {
        computed: {
            remoteComp (){
                let app = getCurrentInstance()
                return defineAsyncComponent(()=>loadModule(`Dys.vue`, {
                    moduleCache:{
                        vue: app
                    },
                    getFile(url) {
                        return Promise.resolve(content)
                    },

                    addStyle() { /* unused here */ },
                }))
            }
        }
    }
</script>

But it does not work, got error:

Uncaught (in promise) TypeError: (0 , _vue.openBlock/createTextNode) is not a function

So how can I create component from String, Thanks much!

直接把example里打包好的js下载下来引入

[jisheng100]

我也碰到了同样的问题，请问怎么解决的

[oceangravity]

You need to use:

import * as Vue from 'vue'
...
moduleCache: { vue: Vue },

Instead of getCurrentInstance

[jisheng100]

Thank you, It works for me.