I’m trying to add a react component to a webpage following this documentation: https://react.dev/learn/add-react-to-an-existing-project

I import the JS file in the HTML page like so:

<script src="./contact.js" type="module"></script>

With type="module" I get the error Unexpected token '<'. Without that, I get the error SyntaxError: Unexpected token '{'. import call expects one or two arguments.

The .js file is below:

import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
const root = createRoot(document.getElementById('sec1'));

root.render(<h1>Hello, world</h1>);

I have a div in the HTML file:

<div id="sec1"></div>

The HTML, JS file, package file, and node_modules folder are all in the same directory. I’m not sure as to why nothing’s rendering.