i use vue2-sfc-loader ,vsersion 0.8.3 ,hava one erro

fushengruomengzhang commented 3 years ago

vue version : v2.6.14 vue2-sfc-loader version : 0.8.3 error:

Uncaught (in promise) TypeError: t is not a function
    at vue2-sfc-loader.js:65
    at vue2-sfc-loader.js:65
    at async P (vue2-sfc-loader.js:65)
    at async Module.N (vue2-sfc-loader.js:65)

FranckFreiburger commented 3 years ago

please give more details (browser version, minimal test case, ...)

leecbryant commented 3 years ago

I am getting the same error from Vue3-sfc-loader. This is going directly from 0.7.3 to 0.8.3. (Only difference in my code being the import of 0.8.3) Any recommendations?

Error:

Uncaught (in promise) TypeError: t is not a function
    at vue3-sfc-loader-083.js:69

fushengruomengzhang commented 3 years ago

please give more details (browser version, minimal test case, ...)

Demo: Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="./vue2-sfc-loader.js"></script> <!--①-->
<script>
    const options = {
        moduleCache: {vue: Vue},
        getFile(url) {
            if (!/.*?\.js|.mjs|.css|.less|.vue$/.test(url)) {
                url = url + '.vue'
            }
            return fetch(url).then(res => {
                return !res.ok ? Promise.reject(res) : res.text().then(content => {
                    if (/.*?\.js|.mjs$/.test(url)) {
                        return {content: content, type: ".mjs"}
                    } else if (/.*?\.vue$/.test(url)) {
                        return {content: content, type: ".vue"};
                    }
                    return content;
                });
            })
        },
        addStyle(textContent, url) {
            if (url) {
                let linkElement = document.createElement('link');
                linkElement.setAttribute('rel', 'stylesheet')
                linkElement.setAttribute('type', 'text/css')
                linkElement.setAttribute('href', url)
                document.head.insertBefore(linkElement,
                    document.head.getElementsByTagName('style')[0] || null)
            } else if (textContent) {
                let styleElement = document.createElement('style');
                document.head.insertBefore(Object.assign(styleElement, {textContent}),
                    document.head.getElementsByTagName('style')[0] || null);
            }
            return null;
        },
        handleModule(type, textContent, path, options) {
            switch (type) {
                case '.css':
                    return options.addStyle(textContent, path);
                case '.less':
                    console.error('.......')
            }
        },
        log(type, ...args) {
            console.log(type, ...args);
        }
    };
    const {loadModule} = window['vue2-sfc-loader'];
    const loadVue = (vuePath) => loadModule(vuePath, options)
    new Vue({
        name: 'project',
        el: '#app',
        render: async h => h(await loadVue('./app.vue')),
    })
</script>
</html>

app.vue

<template>
  <div name="app">
    is demo
  </div>
</template>

<script>
export default {
  name: "app",
  components: {},
  data() {
    return {}
  },
  created() {
  },
  methods: {}
}
</script>

：： ①：Download from 'https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue2-sfc-loader.js'

：：①：Amend to read error:

fushengruomengzhang commented 3 years ago

I am getting the same error from Vue3-sfc-loader. This is going directly from 0.7.3 to 0.8.3. (Only difference in my code being the import of 0.8.3) Any recommendations?

Error:
Uncaught (in promise) TypeError: t is not a function
    at vue3-sfc-loader-083.js:69

Sorry, I have an error using 0.8.3, so I am currently using 0.7.3

FranckFreiburger commented 3 years ago

Before vue3-sfc-loader v1.0.0, API may change quickly. At each release, try to take a look at https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/CHANGELOG.md

In your case, you are using the old API :

getFile() : see https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/CHANGELOG.md#080-2021-05-31 handleModule is now a function, see https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/CHANGELOG.md#060-2021-03-20

fushengruomengzhang commented 3 years ago

I am getting the same error from Vue3-sfc-loader. This is going directly from 0.7.3 to 0.8.3. (Only difference in my code being the import of 0.8.3) Any recommendations? Error:
Uncaught (in promise) TypeError: t is not a function
    at vue3-sfc-loader-083.js:69
Sorry, I have an error using 0.8.3, so I am currently using 0.7.3

I have modified the option. Please refer to it.

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(res) : asBinary ? res.arrayBuffer() : res.text())
        return {getContentData: getContentData, type: type}
    },
    addStyle(textContent, url) {
        if (url) {
            let linkElement = document.createElement('link');
            linkElement.setAttribute('rel', 'stylesheet')
            linkElement.setAttribute('type', 'text/css')
            linkElement.setAttribute('href', url)
            document.head.insertBefore(linkElement,
                document.head.getElementsByTagName('style')[0] || null)
        } else if (textContent) {
            let styleElement = document.createElement('style');
            document.head.insertBefore(Object.assign(styleElement, {textContent}),
                document.head.getElementsByTagName('style')[0] || null);
        }
        return null;
    },
    handleModule(type, getContentData, path, options) {
        switch (type) {
            case '.css':
                return options.addStyle(getContentData(false), path);
            case '.less':
                console.error('.......')
        }
    },
    log(type, ...args) {
        console.log(type, ...args);
    }
};

FranckFreiburger / vue3-sfc-loader

i use vue2-sfc-loader ,vsersion 0.8.3 ,hava one erro #92