'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 |
|---|
