store.setImportMap doesn't work in VitePress

[Tingting Yang]

I use @vue/reply in vitepress to show my UI demo, but it doesn't work to setImportMap.
The wrong Message in iframe is "Failed to resolve module specifier "dayjs".
Tip: edit the "Import Map" tab to specify import paths for dependencies."
There already exist a imports about 'element-plus' in Import Map, like this:

Here is my code in a .vue file.

<script setup>
import { watchEffect, ref } from 'vue'
import { Repl, ReplStore } from '@vue/repl'
import Monaco from '@vue/repl/monaco-editor'
import '@vue/repl/style.css'

const query = new URLSearchParams(location.search)
const store = new ReplStore()

watchEffect(() => history.replaceState({}, '', store.serialize()))

store.setImportMap({
    imports: {
        'element-plus': 'https://unpkg.com/element-plus@2.2.5/es/index.mjs'
    }
})

const customImportStatements = ref([`import ElementPlus from 'element-plus'`])
const customAppUsageCodes = ref([`app.use(ElementPlus)`])
const customHeadTags = ref([
    `<link ref="stylesheet" href="https://unpkg.com/element-plus@2.2.5/dist/index.css">`
])
</script>

<template>
    <Repl :editor="Monaco" :store="store" :clearConsole="false" :previewOptions="{
        headHTML: customHeadTags,
        customCode: {
            importCode: customImportStatements,
            useCode: customAppUsageCodes,
        },
    }" />
</template>

<style>
.vue-repl {
    height: 700px !important;
}
</style>

[Tingting Yang]

here is the wrong message in chrome console:

[Alex Sommers]

I had run into the same issue. It's a bit wonky, but I was able to solve it like so:

const store = new ReplStore();

store.setImportMap({
    imports: {
        myLib: "myLib"
    }
});

const previewOptions = {
    headHTML: '<link rel="stylesheet" href="/myLib.css">',
    customCode: {
        importCode: `import myLib from 'myLib'`,
        useCode: `app.use(myLib)`
    }
};

const defaultFiles = store.getFiles();
delete defaultFiles["App.vue"];
store.setFiles({ ...defaultFiles, "myDefaultComponent.vue": myDefaultComponent}, "myDefaultComponent.vue");

[Kevin Deng 三咲智子]

We temporarily close this due to the lack of enough information.
Please provide a minimal reproduction to reopen the issue.
Thanks.

Why reproduction is required