ionic-team/stencil-store

Uncaught TypeError: t.keys is not a function or its return value is not iterable

deltaGPhys opened this issue · 8 comments

I’m getting the above error in production, when minified (type: dist-custom-elements-bundle, externalRuntime: false, dir: 'www', minify: true). It comes from this bit of the store:

/**
 * Check if a possible element isConnected.
 * The property might not be there, so we check for it.
 *
 * We want it to return true if isConnected is not a property,
 * otherwise we would remove these elements and would not update.
 *
 * Better leak in Edge than to be useless.
 */
const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
const cleanupElements = debounce((map) => {
    for (let key of map.keys()) {
        map.set(key, map.get(key).filter(isConnected));
    }
}, 2000);
const stencilSubscription = ({ on }) => {
    const elmsToUpdate = new Map();
    if (typeof getRenderingRef === 'function') {
        // If we are not in a stencil project, we do nothing.
        // This function is not really exported by @stencil/core.
        on('dispose', () => {
            elmsToUpdate.clear();
        });
        on('get', (propName) => {
            const elm = getRenderingRef();
            if (elm) {
                appendToMap(elmsToUpdate, propName, elm);
            }
        });
        on('set', (propName) => {
            const elements = elmsToUpdate.get(propName);
            if (elements) {
                elmsToUpdate.set(propName, elements.filter(forceUpdate));
            }
            cleanupElements(elmsToUpdate);
        });
        on('reset', () => {
            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));
            cleanupElements(elmsToUpdate);
        });
    }
};

It’s that for loop in cleanupElements that’s breaking. It doesn’t seem to be affecting anything - functionality is all there, but my logs have a billion of these messages, which is not great, and it’s visible in the console. When I debug, the map variable is indeed a Map, with zero entries, so it seems like it shouldn’t balk at that, but it does. Dunno exactly what this does, but it does come from the Stencil store code.

It seems like it's coming ferom the instantiation of my Validator class, which is a homebrew .ts file, not part of a .tsx Stencil component, if that's relevant.

It might be. Can you reproduce the bug?

In what sense? It happens on every load. It'll happen locally, too, if I build --prod. I can't help but reproduce it now :)

I built a quick application a few days ago and did not encounter this problem. I need some kind of reproduction I can use to debug the problem.

Are you using dist-custom-elements-bundle?
I'm adding it to index.html with:

<script type="module">
    import { defineCustomElements } from './index.js';
    defineCustomElements();
</script>

Still trying to reproduce from a minimal example, but the error is 100% dependent upon minification being enabled

It's an interaction with the reflect polyfill:
import 'core-js/features/reflect'; In particular, I'm using Reflect.has(). That's enough to reproduce it for me.

Hey there, thank you for the patience getting back to you. The new team is getting started and we're working through the backlog now.

Care to do me a favor? Create a reproduction repo. If you can do that, we can try to figure out what the resolution is here.

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil Store!