【React】ReactDOM.render is no longer supported in React 18とかなんとかでるときの処方箋

こんなwarningがでる。

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new

結論

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';


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


const container = document.getElementById('root');
if (container) {
    const root = createRoot(container);
    root.render(<App />);
}


// 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();

こうするといい。

参考：
https://zenn.dev/kohski/articles/create-react-app-error-v18

※↑記事だと、if文でcontainerの中身をチェックしていないけど（2022年5月時点）、typescript使ってるとエラーになるためnullかどうかを判別する必要あり。