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 stackoverflow.com/questions/47619405/… — Kawaljit Singh
– Kawaljit Singh, Commented Feb 13, 2020 at 22:07
I see, sorry I have done a search but didn't see this answer. Thanks. — emremrah
– emremrah, Commented Feb 13, 2020 at 22:19

Celso Wellington · Accepted Answer · 2020-02-13 22:07:44Z

4

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

answered Feb 13, 2020 at 22:07

Celso Wellington

9049 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

React import error when using export default

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related