I'm trying to import a simple component into my React. I'm having trouble locating this component.
I'm getting the following error while importing component
./src/App.js 61:28-32 './componentes/Menu' does not contain an export named 'Menu'.
This is my simple component:
import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
export default class Menu extends Component {
render() {
return (
<div>
<Button bsStyle="danger">Hello World Dangerhahahah</Button>
</div>
);
}
}
I'm calling it as follows in my App.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Menu } from './componentes/Menu';
import { Button } from 'react-bootstrap';
class App extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<Menu />
<Button bsStyle="danger">Take this action</Button>
<div className="App">
<div className="bs-header" id="content">
<div className="container">
<h1>Template Changelog</h1>
<p>Lists all changes to the HTML template files</p>
</div>
</div>
</div>
);
}
}
export default App;
The "does not contain a default export" error occurs when we try to use a default import to import from a module that doesn't have a default export. To solve the error, make sure the module has a named export and wrap the import in curly braces, e.g. import {myFunction} from './myModule .
The error "The requested module does not provide an export named" occurs when mixing up default and named ES6 module imports and exports. To solve the error make sure to import default exports without using curly braces and import named exports with curly braces. Copied!
What are Named Exports? Named exports allow us to share multiple objects, functions or variables from a single file and were introduced with the release of ES2015. Named exports are imported with curly braces in various files and must be imported using the name of the object, function or variable that was exported.
As the title suggests, named exports use the name of the function or class as their identifier. When you want to import a named component, you use the same name it was exported with. Names must be imported inside curly brackets.
It's because you're trying to destructure the exported default component from the file.
Just remove the brackets around the Menu
from the import statement in the App component so import { Menu } from './componentes/Menu';
becomes import Menu from './componentes/Menu';
In your Menu.js
you are using export default
which creates a export entry named default
regardless what is the name of class
You should either:
import Menu from './components/Menu';
in App.js
export class Menu extends Component
in Menu.js
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With