CODEWITHSUNDEEP
reactjs
emremrah
emremrah

Reputation: 1765

React import error when using export default

I have a

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?

Upvotes: 1

Views: 4239

Answers (1)

Celso Wellington
Celso Wellington

Reputation: 890

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

Upvotes: 4

Related Questions