React import error when using export default

Question

I have a

menu-item.component in src/components/menu-item/menu-item.component.jsx
directory.component in src/components/directory/directory.component.jsx.

In menu-item.component:

import React from "react";

import withRouter from "react-router-dom";

import "./menu-item.styles.scss";

export const MenuItem = ({ title, imageUrl, size }) => (
  <div className={`${size} menu-item`}>
    <div
      className="background-image"
      style={{
        backgroundImage: `url(${imageUrl})`
      }}
    />
    <div className="content">
      <h1 className="title">{title.toUpperCase()}</h1>
      <span className="subtitle">Alışverişe Başla</span>
    </div>
  </div>
);

// export default MenuItem;

with this, the import statement import { MenuItem } from "../menu-item/menu-item.component"; in directory.component.jsx works well. When I remove export from function definition and instead add export default MenuItem; at the bottom, the npm start fails with:

Failed to compile.

./src/components/directory/directory.component.jsx Attempted import error: 'MenuItem' is not exported from '../menu-item/menu-item.component'.

I'm new to react and following the exact code from a tutorial and it works well in the videos. Why this fails?

Please check this for detailed answer, hope this helps https://stackoverflow.com/questions/47619405/why-does-my-react-component-export-not-work — Kawaljit Singh, Feb 13 '20 at 22:07
I see, sorry I have done a search but didn't see this answer. Thanks. — emremrah, Feb 13 '20 at 22:19

score 2 · Accepted Answer · answered Feb 13 '20 at 22:07

Try removing the brackets

import MenuItem from "../menu-item/menu-item.component"

When you do an 'export default', you dont need to be specific about the name when importing to get the default import (you can import it as Item or MenuI, for example, but always starting with a capital, to let React knows it's still a component);

Also, remove the export before the const declaration you're using export default

React import error when using export default

1 Answers1