FranckFreiburger / vue3-sfc-loader

Single File Component loader for Vue2 and Vue3. Load .vue files directly from your HTML. No node.js environment, no build step.
MIT License
1.19k stars 127 forks source link

Vite + Vue3 uses An error is reported in the production environment after the build #197

Open coffin03 opened 4 months ago

coffin03 commented 4 months ago

Vite + Vue3

An error is reported in the production environment after the build

It is used normally in the development environment

Can it be used after packaging?

TypeError: unknown file: Cannot destructure property 'parentPath' of 's' as it is undefined.

image

<template>
    <div>
        <component :is="remote" v-if="remote" :="props.propsData" />
    </div>
</template>

<script setup lang="ts">
import { loadModule } from "vue3-sfc-loader"
import * as Vue from 'vue'
import { onMounted, defineAsyncComponent, ref, watchEffect } from "vue"

let remote = ref()

const props = defineProps({
    propsData: {
        type: Object,
        required: false
    },
    code: {
        type: String,
        required: true
    },
    fileName: {
        type: String,
        required: true
    }
})

onMounted(() => {
    load()
})

const load = async (code?: string) => {
    console.log(props, 'props--load')
    let res = props.code

    console.log(res, 'res---load')

    const options = {
        moduleCache: {
            vue: Vue
        },
        async getFile() {
            return res
        },
        addStyle(textContent) {
            const style = Object.assign(document.createElement('style'), { textContent })
            const ref = document.head.getElementsByTagName('style')[0] || null
            document.head.insertBefore(style, ref)
        },
        log(type: string, data: any[]) {
            console.log(type, data, 'log')
        }
    };

    remote.value = defineAsyncComponent(() => loadModule(props.fileName || "loader.vue", options))
}
</script>