search

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

TypeError: (intermediate value) is not iterable #195

Open dong-sir opened 4 days ago

dong-sir commented 4 days ago

Describe the bug

Follow the compiledCache option in docx/examples.md

compiledCache: {
    set(key, str) {

        // naive storage space management
        for (; ;) {

            try {

                // doc: https://developer.mozilla.org/en-US/docs/Web/API/Storage
                window.localStorage.setItem(key, str);
                break;
            } catch (ex) {

                // handle: Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'XXX' exceeded the quota

                window.localStorage.removeItem(window.localStorage.key(0));
            }
        }
    },
    get(key) {

        return window.localStorage.getItem(key);
    },
},

To Reproduce

<html>

<body>
    <div id="app"></div>
    <script src="https://unpkg.com/vue@latest"></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);
            },
            compiledCache: {
                set(key, str) {

                    // naive storage space management
                    for (; ;) {

                        try {

                            // doc: https://developer.mozilla.org/en-US/docs/Web/API/Storage
                            window.localStorage.setItem(key, str);
                            break;
                        } catch (ex) {

                            // handle: Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'XXX' exceeded the quota

                            window.localStorage.removeItem(window.localStorage.key(0));
                        }
                    }
                },
                get(key) {

                    return window.localStorage.getItem(key);
                },
            },
        }

        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>

Expected behavior

Versions

Additional context

Here's where the problem might be.

if ( valueStr !== undefined )