URL scheme "file" is not supported. #96

Yennutiebat · 2021-07-26T07:34:16Z

Yennutiebat
Jul 26, 2021

Describe the bug

I am running the examples from the codepen and also the first example shown in the readme using chrome version: 91.0.4472.164

this is what i see

To reproduce
Create index.html and copy js content from the codepen or the readme
in same folder add the myComponent.vue and copy from the codepen

I do see Hello from vue loader but the msg from the component is missing.
I looked trough the faq and other discussions but I couldn't find anything that would help me.
I've used both esm and umd versions.

The code from codepen

<!DOCTYPE html>
<html>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
  <script>
    
    const options = {
      
      moduleCache: {
        vue: Vue,
      },
      
      getFile(url) {
        return fetch(url).then(response => response.ok ? response.text() : Promise.reject(response));
      },
      
      addStyle(styleStr) {
        const style = document.createElement('style');
        style.textContent = styleStr;
        const ref = document.head.getElementsByTagName('style')[0] || null;
        document.head.insertBefore(style, ref);
      },
      
      log(type, ...args) {
        console.log(type, ...args);
      }
    }
    
    const { loadModule, version } = window["vue3-sfc-loader"];
    
    const app = Vue.createApp({
      components: {
        'my-component': Vue.defineAsyncComponent(() => loadModule('./myComponent.vue', options)),
      },
      template: `Hello <my-component></my-component> <sub>from vue3-sfc-loader v${ version }</sub>`
    });
    
    app.mount('#app');
  </script>
</body>
</html>

the code from the readme

<html>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
  <script>

    const options = {
      moduleCache: {
        vue: Vue
      },
      async getFile(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(textContent) {

        const style = Object.assign(document.createElement('style'), { textContent });
        const ref = document.head.getElementsByTagName('style')[0] || null;
        document.head.insertBefore(style, ref);
      },
    }

    const { loadModule } = window['vue3-sfc-loader'];

    const app = Vue.createApp({
      components: {
        'my-component': Vue.defineAsyncComponent( () => loadModule('./myComponent.vue', options) )
      },
      template: '<my-component></my-component>'
    });

    app.mount('#app');

  </script>
</body>
</html>

myComponent.vue

<template>
  <span class="example">{{ msg }}</span>
</template>
<script>
  export default {
    data () {
      return {
        msg: 'world!',
        color: 'blue',
      }
    }
  }
</script>

<style scoped>
  .example {
    color: v-bind('color');
  }
</style>

Answered by Yennutiebat

Jul 26, 2021

I just noticed that i got the same URL scheme "file" is not supported error on this other demo project https://github.com/paul-hammant/VueSfcDemo

View full answer

Yennutiebat · 2021-07-26T09:27:14Z

Yennutiebat
Jul 26, 2021
Author

I just noticed that i got the same URL scheme "file" is not supported error on this other demo project https://github.com/paul-hammant/VueSfcDemo

1 reply

FranckFreiburger Jul 27, 2021
Maintainer

Since most browsers do not allow you to access local filesystem, you can start a small express server to run these examples.
Run the following commands to start a basic web server on port 8181:

npm install express  # or yarn add express
node -e "require('express')().use(require('express').static(__dirname, {index:'index.html'})).listen(8181)"

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

URL scheme "file" is not supported. #96

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

URL scheme "file" is not supported. #96

Yennutiebat Jul 26, 2021

Replies: 1 comment · 1 reply

Yennutiebat Jul 26, 2021 Author

FranckFreiburger Jul 27, 2021 Maintainer

Yennutiebat
Jul 26, 2021

Replies: 1 comment 1 reply

Yennutiebat
Jul 26, 2021
Author

FranckFreiburger Jul 27, 2021
Maintainer