Reactの初期画面が真っ白になってしまう

Question

前提

React初心者です。勉強のためにYouTubeを見ながらチャットボットの作成を試みています。
MaterialUIのインストールのために、Reactのバージョンを18→17に落としたところ、
npm startで初期画面に遷移すると画面が真っ白になってしまいました。

実現したいこと

ブラウザで画面を表示したときにちゃんと映るようにしたいです。

試したこと

他の事例で調べたところ「パスが通っていない」という話が多く見受けられ、
解決策として提示されている『package.jsonに「“homepage”: “./”, 」を追加』を試みましたが変化はありませんでした。

"homepage": "./",

補足情報（FW/ツールのバージョンなど）

macで環境構築をしています。
・node
→v16.16.0
・npm
→8.11.0
・React
→17.0.2

Comments

[hoshi-takanori]

src/index.js や src/App.js はどうなってますか？

[退会済みユーザー]

src/index.js　内の記述↓
＝＝＝ここから＝＝＝
import React from 'react';
import ReactDOM from 'react-dom';
import './assets/styles/index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
＝＝＝ここまで＝＝＝

src/App.js　内の記述↓
＝＝＝ここから＝＝＝
import logo from './logo.svg';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}

export default App;
＝＝＝ここまで＝＝＝

↑のようになっています！
見にくかったらすみません！

Answer 1

React 18 では src/index.js の書き方が変わったので、次のように 17 の書き方に戻せば動くと思います。

import React from 'react';
import ReactDOM from 'react-dom';
import './assets/styles/index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Comments

[退会済みユーザー]

hoshi-takanoriさん
できました！！本当にありがとうございます！！
これで中断されていた作業の続きができます！！
初歩的なミスだったのかも知れませんが、いくら調べても解決できず困っていたので
本当に助かりました。ありがとうございました！！