skip to Main Content

There are two web components which are being hosted in respective servers. I can view the web components individually.

Server A:

VIEW: abc.com/a/index.html

CONFIGURATION
abc.com/a/a.js
abc.com/a/main.css
<a-webcomponent>

Server B:

VIEW: abc.com/b/index.html

CONFIGURATION
abc.com/b/b.js
abc.com/b/main.css
<b-webcomponent>

Now I have a new React Project where I am trying to display both of these web components. So in my index.html I configured both a-webcomponent and b-webcomponent to view them in one project.

<!DOCTYPE html>
<html lang="en">
<head>
   
    <script src="abc.com/a/a.js"></script>
    <link href="abc.com/a/main.css" rel="stylesheet"/>

    <script src="abc.com/b/b.js"></script>
    <link href="abc.com/b/main.css" rel="stylesheet"/>

</head>
<body>
    <div id="root"></div>
</body>
</html>

ROUTES

<Route path="/a-webcomponent" Component={AWebComponent} />
<Route path="/b-webcomponent" Component={BWebComponent} />

AWebComponent

return <a-webcomponent />

BWebComponent

return <b-webcomponent />

PROBLEM

On Switching Routes, I get the following error.

Uncaught TypeError: property "__reactFiber$wqjvbwadizh" is non-configurable and can’t be deleted

2

Answers


  1. Chosen as BEST ANSWER

    The answer to this was to downgrade the react-dom version.

    Using [email protected] works.


  2. nonono,

    A.html and B.html has hosted,you can not combine them together simplely just like you did,there are two ways:

    1)reconstrutor your web,copy A.html and B.html into New.html,drop old A and B,and host New.then visit New.html.

    2)use iframe,but this way just make people visit A & B,you will lose organic and overall in develop your work.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search