Error exporting footer in Reactjs

Question

When running the npm start command returns the error below in the terminal, I am importing the file /components/footer/Footer.js in the archive /src/index.js

//ERROR Failed to Compile.

./src/Components/Register/Register.js Attempted import error: 'Footer' is not Exported from '.. /footer/Footer'

//Footer.js

import React from "react";

export default class Footer extends React.Component {
  render() {
    return (
      <footer className="footer">
      <div>
        <p> Snef Brasil </p>
      </div>
    </footer>
    );
  };
}

---

//index.js

import React  from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './components/app/App'
import {Footer} from './components/footer/Footer'
import {Header} from './components/header/Header'


ReactDOM.render(
   <App />,
   <Footer />,
   <Header />,
   document.getElementById('root'))

Answer 1

In your code now available in the question it is easy to detect the problems, in the import, you have the keys, but, you are importing the file itself, then edit as follows:

import Footer from './components/footer/Footer'
import Header from './components/header/Header'

and will solve this first hang of problems of your code.

Another factor is that you need to have a component root involving these other components the traditional way is to create a component and within this component import the other components, this way today is half impracticable because the code is growing and the number of components too, then make a component that will have these others inside.

Example:

//index.js

import React  from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import Root from './components/root/Root'
ReactDOM.render(<Root />, document.getElementById('root'))

within that component Root do:

//Root.js

import React from "react";
import App from './components/app/App'
import Footer from './components/footer/Footer'
import Header from './components/header/Header'

export default class Root extends React.Component {
  render() {
    return (
      <div>
          <App />
          <Header />
          <Footer />
      </div>
    );
  };
}

This is one of the ways, but there are various forms and various types of organization, the problem is that it ended up importing wrong, that way of importing should have a index.js at the root of the components and in imports, but, increases complexity if you do not know how to organize.

I don’t know which editor you’re using, but, the Visual Studio Code with these extensions to import, will help encode your code and correctly import your components.

Answer 2

Note in your file Footer.js that you are exporting the component as default:

export default class Footer extends React.Component { /* ... */ }
//     ↑↑↑↑↑↑↑
// Notação de um default export

And in the index.js, you are imported using the notation of a named export:

import { Footer } from './components/footer/Footer';
//     ↑        ↑
// Notação de um named import

To import a module you exported as default, you must leave the notation of a named export (remove the keys):

You will then have:

import Footer from './components/footer/Footer';

That’s why most of the time I try to keep myself to a standard: or just use named Exports or just default Exports. It is up to you to choose which approach is more advantageous.

To learn more, read about import and export.

---

It is worth mentioning that you cannot render multiple elements as you are doing:

ReactDOM.render(
   <App />,      // ┐
   <Footer />,   // ┼─ Não é encorajado pelo React e leva à erros.
   <Header />,   // ┘
   document.getElementById('root'));

You need to render a single component, which can have other sub-components. In this case, it is ideal that you use a Fragment:

ReactDOM.render(
  <React.Fragment>
    <App />
    <Footer />
    <Header />
  </React.Fragment>
  document.getElementById('root')
);