空白白页 React.js

Question

我目前正在使用一个 create Reactjs 应用程序，以 localhost:3000 作为服务器。我添加了一个 Header.js 页面并将其链接到我的 App.js，但当我运行部署服务器时，始终显示空白页面。该程序正在读取链接到我的 app.js 的 index.js 文件，因为 serviceworker.js 语法显示为无法编译，但它仍然留下一个白页。下面是我的代码。

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; 

我在控制台中不断收到的错误是：

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)

我的 package.json 中还有一个 "main": "src/app.js"