Is it possible to import from an ES6 module in a component (SFC) ?

[raphael-bresson]

Hi, First I wan't to thank you for this librairy which is going to be very useful for me. I can't manage to import from a module inside a script tag of a .vue file For example :

<template>
  <div class="test">Test</div>
</template>

<script>
import { label } from "./../tools.js";
export default {
  name: "appWorld",
  computed: {
    ...Vuex.mapState(["count"]),
  },
  mounted() {
    console.log(`Component ${this.$options.name} mounted - ${label}`);
  },
};
</script>

<style scoped>
div.test {
  color: red;
}
</style>

The line _import { label } from "./../tools.js";_

raises the following error.

_'import' and 'export' may appear only with 'sourceType: "module"' (2:0)_

I tried adding type="module" to the script tag but it didn't work either.

Is it possible to do that ? How ? Thank you for your answer

Raphael

[FranckFreiburger]

Raphael,

you have 2 options:

1. Rename your tools.js into tools.mjs
2. Define getFile() option to make vue3-sfc-loader understand .js as .mjs file. See https://github.com/FranckFreiburger/vue3-sfc-loader/discussions/12#discussioncomment-255331

[raphael-bresson]

Ok great, thank you for your answer ! I chose option 2 which worked smoothly

    async getFile(url) {
      const res = await fetch(url);
      if (!res.ok)
        throw Object.assign(new Error(url + " " + res.statusText), { res });
      let content = await res.text();
      content = url.endsWith("/tools.js")
        ? { content: content, type: ".mjs" } // `type` since v0.7.0 and `extname` before
        : content;
      return content;
    },

[fushengruomengzhang]

return {content: content, type: ".mjs"}

[spburden]

After the updates is there a new solution for this?

[fushengruomengzhang]

After the updates is there a new solution for this?

vue3-sfc-loader v0.8.3 for vue2

is my options:

const options = {
        moduleCache: {vue: Vue},
        getFile(url) {
            url = /.*?\.js|.mjs|.css|.less|.vue$/.test(url) ? url : `${url}.vue`
            const type = /.*?\.js|.mjs$/.test(url) ? ".mjs" : /.*?\.vue$/.test(url) ? '.vue' : /.*?\.css$/.test(url) ? '.css' : '.vue';
            const getContentData = asBinary => fetch(url).then(res => !res.ok ? Promise.reject(url) : asBinary ? res.arrayBuffer() : res.text())
            return {getContentData: getContentData, type: type}
        },
        addStyle(textContent) {
            let styleElement = document.createElement('style');
            document.head.insertBefore(Object.assign(styleElement, {textContent}),
                document.head.getElementsByTagName('style')[0] || null);
        },
        handleModule(type, getContentData, path, options) {
            switch (type) {
                case '.css':
                    return options.addStyle(getContentData(false));
                case '.less':
                    console.error('.......')
            }
        },
        log(type, ...args) {
            console.log(type, ...args);
        }
    };

[fushengruomengzhang]

After the updates is there a new solution for this?

https://github.com/FranckFreiburger/vue3-sfc-loader/issues/92