'Blank White page React.js

I am currently using a create reactjs app with localhost:3000 as the server. I have added a Header.js page and linked it to my App.js but a blank white page keeps showing up when I run my deployment server. The program is reading my index.js file linked to my app.js because a serviceworker.js syntax shows up as it couldn't compile, but it still leaves a white page. Below is my code.

App.Js:

import React from 'react';
import Header from './Header';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import './App.css';

function App() {
  return (
    <div className="App">
     <h1>This is a tinder clone</h1>

     {/* Header */}
     <Header />
     {/* Tinder Cards */ }
    {/* Buttons below tinder card */}

    {/* Chats screen */}
    {/* Indvidual chat screen */}

    </div>
  );
}

export default App;

Index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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


serviceWorker.unregister();

Header.js

import React from 'react';
import './Header.css';
import PersonIcon from '@mui/icons-material/Person';
import QuestionAnswerIcon from '@mui/icons-material/QuestionAnswer';

function Header() {
    return (
        // BEM 
        <div className="header">
        <PersonIcon />
        <img src="./images/Ringheart.png" alt="Heart logo"/>
         <QuestionAnswerIcon />
        </div>
    );
}

export default Header; 

The error I keep getting in my console is:

ERROR in ./src/index.js 8:0-49
Module not found: Error: Can't resolve './serviceWorker' in 'C:\Users\donal\Videos\Web-Developement\tinder-clone\src'
resolve './serviceWorker' in 'C:\Users\donal\Videos\Web-Developement\tinder-clone\src'
  using description file: C:\Users\donal\Videos\Web-Developement\tinder-clone\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Users\donal\Videos\Web-Developement\tinder-clone\package.json (relative path: ./src/serviceWorker)

I have also a "main": "src/app.js"in my package.json



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source