DOM-element error

Hello,

I’m practicing React and trying to create a component, a navbar. So far so good, but when I refresh browser I get “Error: Target container is not a DOM element.”

at this line: ReactDOM.render(<Nav />, document.getElementById('nav'));
My React-code:


import React from 'react';
import ReactDOM from 'react-dom';


class Nav extends React.Component {
  render() {
   
    const nav_style = {
  
    };
 
      
    return (
      <div>
        <div style={nav_style}>
            <a href="index.html">Home</a>
        </div>
      </div>
    );

 }
}

ReactDOM.render(<Nav />, document.getElementById('nav'));
My html:
<header>
  <nav id="nav"></nav>
</header>


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

</body>
<script src="/components/nav.js"></script>

Perhaps my file structure is wrong?
sc

You have document.getElementById('nav') but your div has id="root"