Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

519
Views
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

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!