Mutiny breaks readImplementation, Cannot read properties of undefined (reading 'prototype')

[nickcreel]

I'm trying to integrate Partytown into a CraftCMS website using the HTML implementation; I ran into some issues and did some debugging that may be useful for others trying to identify issues with their implementation effort.

I followed the HTML integration steps and ran into the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
    at VM2608 partytown-sandbox-sw.js:527:56
    at Array.map (<anonymous>)
    at readImplementations (VM2608 partytown-sandbox-sw.js:517:67)
    at readMainPlatform (VM2608 partytown-sandbox-sw.js:497:27)
    at VM2608 partytown-sandbox-sw.js:583:56
    at worker.onmessage (VM2608 partytown-sandbox-sw.js:593:69)

I did a bit of digging with debug: true and added some logging to the debug files, like this:

    const readImplementations = (impls, interfaces) => {
        console.log(JSON.stringify(impls, null, 2))
        const cstrs = new Set([ "Object" ]);
        const cstrImpls = impls.filter((implData => implData[0])).map((implData => {
            const impl = implData[0];
            const interfaceType = implData[1];
            const cstrName = getConstructorName(impl);
            console.log({
                cstrName,
                impl,
                interfaceType,
                'mainWindow[cstrName]': mainWindow[cstrName],
            })
            const CstrPrototype = mainWindow[cstrName].prototype; // this is the line which caused the error
            return [ cstrName, CstrPrototype, impl, interfaceType ];
        }));
        cstrImpls.map((([cstrName, CstrPrototype, impl, intefaceType]) => readOwnImplementation(cstrs, interfaces, cstrName, CstrPrototype, impl, intefaceType)));
        return interfaces;
    };

and found an object o which has no entry in mainWindow under its cstrName. It's picked up when readImplementations reads the implementation for intersectionObserver from the impls array in readMainPlatform, as part of initWebWorkerData:

        const intersectionObserver = getGlobalConstructor(mainWindow, "IntersectionObserver");
        //...
        const impls = [ [ mainWindow.history ], [ perf ], [ perf.navigation ], [ perf.timing ], [ screen ], [ screen.orientation ], [ mainWindow.visualViewport ], /*here*/[ intersectionObserver, 12 ], [ mutationObserver, 12 ], [ resizeObserver, 12 ], [ textNode ], [ comment ], [ frag ], [ shadowRoot ], [ elm ], [ elm.attributes ], [ elm.classList ], [ elm.dataset ], [ elm.style ], [ docImpl ], [ docImpl.doctype ] ];
        //...
        const initWebWorkerData = {
            $config$: $config$,
            $interfaces$: readImplementations(impls, initialInterfaces), /* here */
            $libPath$: new URL(libPath, mainWindow.location) + "",
            $origin$: origin
        };

after adding some logging, I was able to determine the above and did some investigating in the devtools console. I found that o is defined by a third party script mutiny, a third-party A/B testing script. For what it's worth I did not attempt to run this script with partytown (it has to run synchronously to prevent any render delays).

I confirmed that removing the mutiny script from my site's head tag allows Partytown to initialize the web worker successfully. However this isn't a viable fix for production as we need to keep Mutiny. I want to create an issue for this, but I'm not sure how to create a reproducible example for this because it may be specific to Mutiny's implementation? I'd like to open a PR to fix this. I think something like this would suffice:

    const readImplementations = (impls, interfaces) => {
        console.log(JSON.stringify(impls, null, 2))
        const cstrs = new Set([ "Object" ]);
        const cstrImpls = impls.filter((implData => implData[0])).map((implData => {
            const impl = implData[0];
            const interfaceType = implData[1];
            const cstrName = getConstructorName(impl);
            console.log({
                cstrName,
                impl,
                interfaceType,
                'mainWindow[cstrName]': mainWindow[cstrName],
            })
            if (!mainWindow[cstrName]) {
                console.warn('No constructor found for', cstrName)
                return
            } else {
                const CstrPrototype = mainWindow[cstrName].prototype;
                return [ cstrName, CstrPrototype, impl, interfaceType ];
            }
        }));
        cstrImpls.filter(x => x).map((([cstrName, CstrPrototype, impl, intefaceType]) => readOwnImplementation(cstrs, interfaces, cstrName, CstrPrototype, impl, intefaceType)));
        return interfaces;
    };

^ I think readImplementations just needs some way to handle the case when mainWindow[cstrName] is undefined