react 18 typescript types in package.json

Question

Im trying to upgrade my react 17 to 18

"@types/react": "???????",
"@types/react-dom": "????????",
"react": "^18.0.0",
"react-dom": "^18.0.0",

What should I put in @types/react and @types/react-dom ?
Thanks

Answer 1

I used Create React App to generate a new TypeScript project and take a look at the dependencies, since I was striking out with the recommendation of removing @types/react and @types/react-dom. That was not fun.

I ended up installing these types:

"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",

Then I could use the following to mount my app in index.tsx:

import React from 'react';
import { createRoot } from 'react-dom/client';
....
const container = document.getElementById('root');
// OH BOY, container can be null but createRoot can't handle this...
if (!container) {
   throw "Can't instantiate";
}
const root = createRoot(container);
root.render(
   <React.StrictMode>
   <App />
   </React.StrictMode>
);

Yes, there is a problem with the current typescript type where it could receive a null, and you have to guard it with an if / throw check... Or do a ts-ignore.

I'm hoping that gets fixed somehow. But anyway, it's 1AM here and I finally was able to get my app working with React 18 and Typescript using this hack.

Answer 2

At the time I write this, the React 18 types don't appear to be finished yet (see tweet from maintainer). There are former "@next" versions of React 18 types, but they don't match the React 18 release and probably shouldn't be used. Sit tight and they'll likely be finished/released in the coming days.

Answer 3

while react team working on the new types release, if you want to test it out you can keep the old "@types/react": "^17.0.40" and "@types/react-dom": "^17.0.13" types version, and inside the index.tsx after updating react and react-dom to version 18.0.0 you need first to import ReactDOM from react-dom/client and then create the root element from the element id=root using createRoot and then use .render to render the content of the <App/> component inside the created root element like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

let root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
);

Answer 4

Looks like @types/react and @types/react-dom are now on v18. Here's how I upgraded:

• uninstall both those packages
• upgrade to react 18
• yarn install -D @types/react @types/react-dom, which automatically uses v18 types now. (or npm install --save-dev ...)

I'm sure there's a way that doesn't require you to uninstall first via yarn upgrade, but that didn't work for me for some reason.