Embedding react component in existing web project

348 views Asked by At

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?

0

There are 0 answers