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
The answer to this was to downgrade the react-dom version.
Using [email protected] works.
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.