Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Hi I am new to react and trying to under components

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

Tags:

2

Answers


  1. 0

    It looks like you are using the export default syntax to export your Header component in Header.js, but you are importing it using curly braces in App.js. When using export default, you should import it without curly braces.

    Remove curly braces:

       import {Header} from './components/Header.js';

    Here’s the corrected import statement in App.js:

      import Header from './components/Header.js';

    Make sure to update the import statement in App.js as shown above and see if the issue is resolved.

    Login or Signup to reply.
  2. 0

    If you export the header as a default you may have to write like this:

    import Header from "./components/Header.js";
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search