Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
raphael-bresson opened this issue Jan 12, 2021 · 6 comments
Closed
Labels
enhancement New feature or request

Comments

@raphael-bresson
Copy link

raphael-bresson commented Jan 12, 2021

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

@raphael-bresson raphael-bresson added the enhancement New feature or request label Jan 12, 2021
@FranckFreiburger
Copy link
Owner

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 Components aren't fetched again after loaded once #12 (comment)

@FranckFreiburger FranckFreiburger pinned this issue Jan 12, 2021
@raphael-bresson
Copy link
Author

raphael-bresson commented Jan 12, 2021

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
Copy link

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

@FranckFreiburger FranckFreiburger unpinned this issue Jul 13, 2021
@spburden
Copy link

After the updates is there a new solution for this?

@fushengruomengzhang
Copy link

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
Copy link

After the updates is there a new solution for this?

#92

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants