javascript - Importing frontend libraries into wix website - Stack Overflow

admin管理员组

文章数量:1421751

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?

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?

• javascript
• node.js
• reactjs
• frontend
• velo

Share Improve this question Follow edited Dec 17, 2018 at 19:57 Bob Arnson 21.9k22 gold badges4242 silver badges5050 bronze badges asked Dec 17, 2018 at 12:16 WestedCreanWestedCrean 4122 silver badges88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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./code/reference/$w.HtmlComponent.html

https://support.wix./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.

本文标签： javascriptImporting frontend libraries into wix websiteStack Overflow