0

I started a React app using the following react starter kit and I'm trying to use one of the components that I created in an existing old web project.

After creating the component using the starter kit, I run npm run build and got the following chunks:

enter image description here

Since I'm trying to import my Home component, I copied home.js to my old project, and referred to it with React.

What I did in my old project:

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="components/home.js"></script>

Then on the page where I want to show my component:

<!-- Load our React component. -->
<script>
const domContainer = document.querySelector('#reactHome');
ReactDOM.render(e(Home), domContainer);
</script>

<div id="reactHome"></div>

But console show the folloing errors:

home.js:1 Uncaught ReferenceError: require is not defined
    at home.js:1
(anonymous) @ home.js:1
indexReact.php?page=battleArea:314 Uncaught ReferenceError: Home is not defined
    at indexReact.php?page=battleArea:314

Any idea what i'm missing?

TheUnreal
  • 23,434
  • 46
  • 157
  • 277
  • react-starter-kit is isomorphic app type. So you need a Node JS server to serve it. You can not run JS code directly from browser. – Tien Duong Sep 25 '20 at 08:13
  • Thanks @TienDuong. Assuming I'm running the nodeJS server - is it still possible to embed the component? If yes, how? – TheUnreal Sep 25 '20 at 08:19
  • It is possible. You just need to change your webpack config (if you using webpack to bundle your reactjs) to output commonjs library https://webpack.js.org/configuration/output/#outputlibrarytarget – Tien Duong Sep 25 '20 at 08:26
  • I'm using babel – TheUnreal Sep 25 '20 at 08:53

0 Answers0