0

Community, I rendered more than one component from a single page and the problem I receive is:

[./src/App.js Attempted import error: 'Greeting' is not exported from './components/Home'.]

Can anybody tell me why?

App.js

import "./App.css";
import { Home, Page, Greeting } from "./components/Home";
function App() {
  return (
    <div className="App">
      <Home />
      <Page />
      <Greeting />
    </div>
  );
}

export default App;

Home.js

import React, { Component } from "react";
import React from "react";

class Home extends Component {
  render() {
    return (
      <div className="box">
        <h1>Its a box man!</h1>
      </div>
    );
  }
}
class Page extends Component {
  render() {
    return (
      <div className="box">
        <h1>Its a second box man! from the other Component</h1>
      </div>
    );
  }
}

const Greeting = () => {
  return <h1>Hello again</h1>;
};

export { Home, Page, Greeting };

*The aim to practice two components from the same page, rather than just separating them.

Improve this question
6
  • And the error is ... ? Commented Dec 30, 2020 at 16:00
  • Sorry I forgot ./src/App.js Attempted import error: 'Greeting' is not exported from './components/Home'. Commented Dec 30, 2020 at 16:01
  • Just add export... Export const greeting Commented Dec 30, 2020 at 16:24
  • Your code is working completely fine, no need to add defaults or any other exports. I've tested it personally. You're missing something else. Can you show your project structure? Also, you're importing React twice. Commented Dec 30, 2020 at 16:26
  • I removed one of them and still doesn't work Commented Dec 30, 2020 at 16:28

4 Answers 4

Reset to default
1

Try to export all components one by one in Home.js like this:

export class Home... export class Page... export const Greeting...

And after that delete this line:

export { Home, Page, Greeting };

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

Comments

0

Change

const Greeting = () => {
  return <h1>Hello again</h1>;
};

to

export const Greeting = () => {
  return <h1>Hello again</h1>;
};

and your issue should be resolved

Improve this answer

4 Comments

Unfortunately, it didn't.
do as @Prime said ``` export default { Home, Page, Greeting} ``` and post the error here if coming any
post error which you are facing after advice. need exact error after changes being made
--- Latest update ---, issue resolved and Spactex got a reasoning also of export default and export
0

Try this in Home.js. If you export module as default, you can import without parenthesis {}. But if you export without default, you have to import using parenthesis.

export default { Home, Page, Greeting };
Improve this answer

3 Comments

It didn't solve the problem, I solved it but make no sense to me. I exported one of them as default and the other two in { } and I imported them in App.js the default in a line and the other two {}, it worked but make no sense what was that.
Check this article. javascript.info/import-export It will give you more explanation. :)
Could you add the explanation from the article to your answer? That way, if the article ever goes offline, this answer will still have that useful explanation.
0

I tested your code and there was no problems except if these are not typos:

  • you haven't imported react in your App.js
  • you've imported react twice in your Home.js

The only problem I can think of is that you have forgotten to save Home.js. If you've saved Home.js:

  1. exit you're dev server using ctrl + c and start it again and see if the problem is resolved.
  2. try removing Greeting Component and let us know if you still get errors.
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.