I am trying to make a header, I have created an Header.js file within an components folder which consists of this.
export default function Header() {
return(
<h1 className="header-title">Just Because</h1>
);
}
I import and call my Header() in App.js
import logo from './logo.svg';
import './App.css';
import {Header} from './components/Header.js';
function App() {
return (
<div className="App">
<header className="App-header">
<Header/>
</header>
</div>
);
}
export default App;
Currently I am getting this error message
createRoot(…): Target container is not a DOM element.
at createRoot (http://localhost:3000/static/js/bundle.js:31288:15)
at Object.createRoot$1 [as createRoot] (http://localhost:3000/static/js/bundle.js:31668:14)
at exports.createRoot (http://localhost:3000/static/js/bundle.js:31744:16)
at ./src/index.js (http://localhost:3000/static/js/bundle.js:222:60)
at options.factory (http://localhost:3000/static/js/bundle.js:41776:31)
at webpack_require (http://localhost:3000/static/js/bundle.js:41199:33)
at http://localhost:3000/static/js/bundle.js:42422:37
at http://localhost:3000/static/js/bundle.js:42424:12
I understand its saying that Header is not DOM (Document Object Model) but do not understand why? Initially had a error such as export ‘Header’ (imported as ‘Header’) was not found in ‘./components/Header.js’ (possible exports: default) but I found this post import error: ‘Header’ is not exported from ‘components/Header’ and I removed the “default”, but I am finding myself going around in circles. Any suggestions would be greatly appreciated