Defined Component is not accessible in App.js

Question

My component with Home is not accessible in my App.js component. Home.jsx

import React from 'react'
import "./Home.scss



const Home = () => {
  return (
    <div>
      <div className="home">Home</div>
    </div>
  )
}

export default Home

This is my App.js Code

import "./pages/home/Home"


function App() {
  return (
    <div className="App">
    <Home/>
    </div>
  );
}

export default App;

I am facing the error:

[eslint] 
src/App.js
  Line 8:6:  'Home' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.
ERROR in [eslint] 
src/App.js
  Line 8:6:  'Home' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.

webpack compiled with 1 error

I am expecting to access Home component in App.js file

Answer 1

Add reference when you file import like this

import Home from "./pages/home/Home";

Answer 2

In App.js your import should be

import Home from "./pages/home/Home"

Then you can use it

Answer 3

try

import Home from "./pages/home/Home"

if next time you are not using export default, you need to do destructuring

import {moduleA, moduleB} from "./pages/home/Home"

assume you are exporting moduleA and moduleB without export default keyword