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, 禁止转载 🈲️，侵权必究⚠️！

---