React 18 errors All In One

xgqfrms / 2024-10-08 / 原文

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

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

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！