Параллельный режим React Suspense не работает

Question

Я пытаюсь использовать задержку реакции, но у меня возникла проблема с рендерингом после внесения изменений в файл react index.js, и я уже установил приостановку реакции "npm install response @ экспериментальный response-dom@ экспериментальный"

Мой файл index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

Файл Index.js

ошибка

TypeError: react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.createRoot is not a function

Изображение ошибки

Answer 1

Всем, кто обновляет старое приложение React, документ поддержки React на React 18 говорит писать ТОЛЬКО:

      npm install react react-dom

для обновления React 18. У меня было два приложения React 16, которые я хотел обновить.

Для этого я сначала обновился до React 17:

      npm install react@17.0.0 react-dom@17.0.0

ТОЛЬКО ПОСЛЕ того, как эта версия будет установлена ​​должным образом, вы сможете установить до 18, указав версию в команде установки:

      npm install react@18.0.0 react-dom@18.0.0

После того,

      ReactDOM.createRoot(document.getElementById("root")).render(<App />);

работает просто отлично. Следите за обновлением версии в файле package,json.

Answer 2

Для работы необходимо использовать ReactDOM.unstable_createRoot

Answer 3

изменить ->import ReactDOM from "react-dom";

в ->import ReactDOM from "react-dom/client";

Answer 4

ФункцияcreateRootизreact-dom/client. Вы можете попробовать именованный импорт следующим образом:

      import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

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