"Add-on can not execute in secure mode" vid användning av vissa externa paket

[Wiktry]

Hej!

Problemet dyker upp när vi försöker använda paket som på något vis skapar eller redigerar DOM noder. I de flesta fall handlar det om paket som har med egna noder, så som alla primitiva komponenter från Radix-ui eller mesh komponenten från @react-three/fiber. Men också i fall där paketet bara modifierar DOM noden, så som med Swiper.

Det här är ett problem vi har stött på några gånger under vår utveckling av webappar, och vi undrar om ni har någon insikt i vad som orsakar det, och om det finns någon möjlig lösning?

[robinlagren]

Tjena,

Det beror mest troligt på att paketen inkluderas i serverbundlen och kommer då krascha om javascriptmotorn stöter på objekt som den inte känner till (t.ex. window). Allt som refereras med startpunkt från index.js kommer hamna i serverbundlen och allt som refereras från main.js hamnar i klientbundlen.

För att komma runt problemet kan ni skippa att serverrendera genom att i index.js köra res.agnosticRender('', data); och kicka igång er app i main.js (dvs inte inkludera några referenser till komponentträdet från index.js om de använder paket som inte kan exekveras server side). Ni kan ju även välja att serverrendera ett skal för er app så länge ni inte inkluderar några referenser till paket som inte kan köras serverside.

[oskarakerlund-consid]

Exempel på hur den egna React-koden kan renderas serverside, men låta klientsidan köra tredjepartsgrejen:

index.js

res.agnosticRender(renderToString(<App thirdPartyFunction={() => null} />), {});

main.js

import thirdPartyFunctionfrom "thirdPartyFunction";
 // ...
ReactDOM.hydrate(<App thirdPartyFunction={thirdPartyFunction} />, el);

App.js

React.useEffect(() => {
    // executed on client side
    thirdPartyFunction();
}, []);

[Wiktry]

Då förstår vi vad problemet var och hur vi löser det!