1

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?

Galanthus
  • 1,958
  • 3
  • 14
  • 35

2 Answers2

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?

Tim Gerhard
  • 3,477
  • 2
  • 19
  • 40
  • 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 Mar 04 '21 at 10:04
  • Doing this: export { default } from "./Header"; works. – Galanthus Mar 04 '21 at 10:10
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

Bingo9
  • 1
  • 1