Blanc page after importing <Home /> componenet-CodePudding

I just started a new React project and created Home page, but i got this error :

Compiled with warnings.

src\App.jsx
  Line 5:3:  Unreachable code  no-unreachable

Even thought i double checked my imports but i can't understand why can't be imported correctly? I'm still getting a blanc page.

Home.jsx

import React from 'react'

const Home = () => {
  return (
    <div>
        Homepage
    </div>
  )
}

export default Home

App.jsx

import Home from "./pages/Home";

const App = () => {
  return
  <Home />;     //this is the error spot
};

export default App;

package.json:

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",

CodePudding user response：

just change it like below:

import Home from "./pages/Home";

const App = () => {
  return <Home />;
};

export default App;

Note: Remove Enter before Home component!

CodePudding user response：

JavaScript runtimes automatically insert semicolons when the code is being interpreted. The issue here is that since there is a newline after your return statement, the interpreter is inserting a semicolon, which prevents any code after that from executing, including your <Home /> component.

You can learn more about semicolon insertion here