I have developed a React app using CRA and I'm trying to host it on existing wix page. With WIX I can use javascript files so I bundled my application code with dependencies into one file and tried copying and pasting react and react-dom code from its official cdn into my directory.
Somehow it's still not working, in react-dom.js I see error:
'window' is not defined
While right now I try to import only with react and react-dom, the problem applies in general to importing js frontend libraries into WIX.
I need application code to be hosted inside wix page but I think it should work fine if I add app dependencies using cdns from an iframe, a bit like in this topic then refer to it using wix syntax
let React = $w("#elementid").window.React;
to get the iframe, and from there to get React/other library reference. iFrame (WIX HTML element) is hosted in the same origin.
I can also use node.js code and npm modules listed here
Thoughts?
You cannot use native react code directly on a Wix Code page.
You can write an HTML document and load it into your iframe element but the code will need to run in the iframe for security reasons. You can exchange messages between the iframe and the Wix Code page using the postMessage and onMessage functions only the iframe element.
https://www.wix.com/code/reference/$w.HtmlComponent.html
https://support.wix.com/en/article/wix-code-working-with-the-html-element
You can include nodejs packages (once approved) so long as they don’t try to manipulate the dom directly. You need to think of the Wix Code page in the same way you would the jquery framework. There is the main page scope selector $w which is where you page elements live. Only elements defined on your Wix Editor can be manipulated via the $w scope selector or related event handlers.
The only way you can use javascript that manipulates the dom directly or via a framework like react is sandboxed in an iframe using the htmlComponent.