Cypress throws an error when using .invoke() in a SystemJS vite (Rollup) application

[florian-bretz-pt]

Hi,
after migrating our app from create-react-app (webpack) to Vite (Rollup), where both builds externalize "react" and "react-dom", because the app is part of a single-SPA micro frontend, which loads react and react-dom, I start to run into problems with the Cypress tests which call .invoke(). All other tests are passing.

This is the error stack trace:

TypeError: Timed out retrying after 8000ms: Cannot read properties of undefined (reading 'has')
    at P6 (https://hub.dev.myOrg.net/merchant-master-data-frontend/myOrg-masterdata.js:1:244)
    at $ (https://hub.dev.myOrg.net/merchant-master-data-frontend/myOrg-masterdata.js:1:289)
    at $Cy.getRemotejQueryInstance (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:140834:29)
    at <unknown> (https://hub.dev.v.net/__cypress/runner/cypress_runner.js:118513:20)
    at Object.subjectFn (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:144639:16)
    at $Cy.verifyUpcomingAssertions (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:143979:31)
    at onRetry (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:144630:15)
    at tryCatcher (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:1777:23)
    at Promise.attempt.Promise.try (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:4285:29)
From previous event:
    at Promise.longStackTracesCaptureStackTrace [as _captureStackTrace] (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:3456:19)
    at Promise.attempt.Promise.try (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:4275:9)
    at whenStable (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:144517:68)
    at <unknown> (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:144458:14)
    at tryCatcher (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:1777:23)
    at Promise._settlePromiseFromHandler (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:1489:31)
    at Promise._settlePromise (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:1546:18)
    at Promise._settlePromise0 (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:1591:10)
    at Promise._settlePromises (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:1671:18)
    at Promise._fulfill (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:1615:18)
    at <unknown> (https://hub.dev.myOrg.net/__cypress/runner/cypress_runner.js:5420:46)

the error only occurs during the test runs and is not reproducible manually.

to give more context, this is the start of the bundle, which is referenced in the stack trace myOrg-masterdata.js:1:244:

var h6e=Object.defineProperty;var RT=Mn=>{throw TypeError(Mn)};var b6e=(Mn,Bn,Le)=>Bn in Mn?h6e(Mn,Bn,{enumerable:!0,configurable:!0,writable:!0,value:Le}):Mn[Bn]=Le;var Ln=(Mn,Bn,Le)=>b6e(Mn,typeof Bn!="symbol"?Bn+"":Bn,Le),P6=(Mn,Bn,Le)=>Bn.has(Mn)||RT("Cannot "+Le);var $=(Mn,Bn,Le)=>(P6(Mn,Bn,"read from private field"),Le?Le.call(Mn):Bn.get(Mn)),pn=(Mn,Bn,Le)=>Bn.has(Mn)?RT("Cannot add the same private member more than once"):Bn instanceof WeakSet?Bn.add(Mn):Bn.set(Mn,Le),yt=(Mn,Bn,Le,x)=>(P6(Mn,Bn,"write to private field"),x?x.call(Mn,Le):Bn.set(Mn,Le),Le),ct=(Mn,Bn,Le)=>(P6(Mn,Bn,"access private method"),Le);var v8=(Mn,Bn,Le,x)=>({set _(fo){yt(Mn,Bn,fo,Le)},get _(){return $(Mn,Bn,x)}});System.register(["react","react-dom"],function(Mn,Bn){"use strict";var Le,x,fo,Uo,Va,Nu,il,ms,Ba,Kt,We,Co,St,Qr,Vu,L6,E6,R6,pi,y8;

Bn (normally a WeakMap) is the thing that is not defined in the SystemJS bundle.

I tried waiting a couple of seconds in the test, but this didnt solve it.

What solved it, was to NOT exclude react from the bundle. But this would mean all micro frontends have a complete react package in their production bundle and with multiple micro frontend on a page, it would mean multiple times parsing the react code and having multiple react instances. This cant be the solution, only because the error happens in cypress but not when surfing the app.

Also since the other tests pass, mean react was generally loaded successfully and the app is also working inside cypress.

At this point Im clueless, why the error happen or how to solve it properly.

I would be happy for any hint.

cheers

[florian-bretz-pt]

the error also happens when i try to call .then() on an element
so I guess the async handling of elements in cypress is an issue?!