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.03k stars 116 forks source link

Cannot load .vue files - Error: html at getFile #128

Closed adrianjoshua-strutt closed 2 years ago

adrianjoshua-strutt commented 2 years ago

Hello,

I am currently trying to migrate from the http-vue-loader to the vue3-sfc-loader

While loading my main.vue is no big deal, loading other components within my main.vue does not seem to work as expected. My imported file gets called within the getFile but the getFile is always called a second time with the url parameter being "html". Of course this file is not found and the rendering therefore crashes. The weird thing being that this does not happen with the main.vue. The main.vue is rendered correctly.

I tried several methods to import my components. Neither esm nor the standard version seem to work. I also used the httpVueLoader function from #43, producing the same result. Firefox, Chrome and Edge also produce the same result.

Below is a minimal version of my code that should produce the same error. Hopefully this is just a stupid mistake.

main.html

<html>
    <div id="app"></div>

    <script type="module">
        import * as Vue from 'https://unpkg.com/vue@3/dist/vue.runtime.esm-browser.prod.js'
        import { loadModule } from 'https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.esm.js'

        const options = {
            moduleCache: {
              vue: Vue,
            },
            async getFile(url) {
              console.log(url)
              const res = await fetch(url);
              if ( !res.ok ) {
                throw Object.assign(new Error(res.statusText + ' ' + url), { res });
              }   
              return {
                getContentData: (asBinary) => asBinary ? res.arrayBuffer() : res.text(),
              }
            },
            addStyle() { /* unused here */ },
        };

        Vue.createApp(Vue.defineAsyncComponent(() => loadModule('/test/main.vue', options))).mount("#app");
    </script>
</html>

main.vue

<template>
    <h1>This works</h1>
    <testcomponent></testcomponent>
</template>

<script>
  import { testcomponent } from "testcomponent.vue";

  export default  {
      components: {
        testcomponent
      }
  }
</script>

testcomponent.vue

<template lang="html">
    <h1>This does not work</h1>
</template>
<script>
  export default{

  }
</script>
adrianjoshua-strutt commented 2 years ago