import error: 'Header' is not exported from 'components/Header'

Question

I have my components folder with a component named Header. the Main JS file and Styles file. For some reason I am getting "import error: 'Header' is not exported from 'components/Header'"

Header.js:

const Header = () => {
  return (
    <div>
      <h2>The Header</h2>
    </div>
  );
};

export default Header;

Components/Header/index.js:

export * from "./Header";

App.js:

import { Header } from "components/Header";

function App() {
  return (
    <div className="App">
      <Header />
    </div>
  );
}

export default App;

Why is this not working?

Tim Gerhard · Accepted Answer · 2021-03-04 09:56:35Z

5

It's because you do a default-export (export default Header) so you'll have to import it this way:

import Header from "components/Header"

If you want to use a named import (import { Header } from "components/Heaader";) you'll have to leave the "deafault" away from your export.

This StackOverflow post explains the difference well: Why and when to use default export over named exports in es6 Modules?

answered Mar 4, 2021 at 9:56

Tim Gerhard

3,6272 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Galanthus Over a year ago

Now i get this: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Galanthus Over a year ago

Doing this: export { default } from "./Header"; works.

Bingo9 · Accepted Answer · 2022-10-31 10:37:51Z

0

I just did copied the path by right clicking the file and selecting copy the path and did

import Header from "/Users/********/Downloads/keeper-app-part-1-starting/src/components/Header.jsx";

and it worked

answered Oct 31, 2022 at 10:37

Bingo9

11 bronze badge

Collectives™ on Stack Overflow

import error: 'Header' is not exported from 'components/Header'

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related