React 18 displays ReactDOM.render warning even though I switched to the new standard

user_12334270 0
Viewed 416

I have switched to React 18 and followed official guide on how to change root's render method.

Here is my root's render code:

import { createRoot } from 'react-dom/client';

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

Both react and react-dom are ^18.0.0.

App is throwing this:

enter image description here

react-18 react-dom reactjs
3 Answers

By simply refactoring, the line of code below will also work

import { createRoot } from "react-dom/client";
import App from "./components/App";
createRoot(document.getElementById("root")).render(<App tab="home" />);

user_166987410

Have you installed type definitions for react and react-dom packages? You need to add @types/react and @types/react-dom packages and set them in the tsconfig.json file. Keep in mind, package versions needs to be compatible. Also the expected parameter type of the createRoot method is Element | DocumentFragment so you can either use exclamation mark or type assertion like as Element.

index.tsx

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

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

tsconfig.json

"types": ["react", "react-dom"]

package.json

"dependencies": {
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-scripts": "4.0.3"
  },
"devDependencies": {
    "@types/react": "18.0.0",
    "@types/react-dom": "18.0.0",
    "typescript": "4.4.2"
  },
user_96767310
user_63268160
Related