React 18 errors All In One

React 18 errors All In One

errors

Module '"react-dom"' has no exported member 'createRoot'.ts(2305)

// ❌
import { createRoot } from "react-dom";

solutions

// ✅
import { createRoot } from "react-dom/client";

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis

ReactDOM.render is no longer supported in React 18. Use createRoot instead.
Until you switch to the new API, your app will behave as if it’s running React 17.
Learn more: https://reactjs.org/link/switch-to-createroot

React 18 introduces a new root API which provides better ergonomics for managing roots.
The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.

demos

# react-dom
$ npm install react react-dom

https://www.npmjs.com/package/react-dom

(🐞 反爬蟲測試！打擊盜版⚠️）如果你看到這個資訊, 說明這是一篇剽竊的文章，請訪問 https://www.cnblogs.com/xgqfrms/ 檢視原創文章！

react blogs

https://react.dev/blog/2024/05/22/react-conf-2024-recap

https://www.youtube.com/watch?v=T8TZQ6k4SLE

React 19 RC

https://react.dev/blog/2024/04/25/react-19

React v18.0

https://react.dev/blog/2022/03/29/react-v18

refs

https://medium.com/fortum-tech/tips-tricks-upgrading-to-react-18-ece2fc726242

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 釋出文章使用：只允許註冊使用者才可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

---