3

I am trying to create react 18 app with TypeScript, I tried following this guide but I can't make it work. I can't add "types": ["react/next", "react-dom/next"] to tsconfig file. I'm getting error:

Cannot find type definition file for 'react-dom/next'.
  The file is in the program because:
    Entry point of type library 'react-dom/next' specified in compilerOptionsts
Cannot find type definition file for 'react-dom/next'.
  The file is in the program because:
    Entry point of type library 'react-dom/next' specified in compilerOptionsts

Also I can't import ReactDom from 'react-dom/client'; I'm getting this error:

Could not find a declaration file for module 'react-dom/client'. 'C:/Users/bansc/Desktop/youtube-channel/api-calls/my-app/node_modules/react-dom/client.js' implicitly has an 'any' type.
  If the 'react-dom' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom'ts(7016)
Masoud Keshavarz
  • 2,166
  • 9
  • 36
  • 48
Wings
  • 502
  • 4
  • 14
  • I've used create-react-app just a few day ago with --template tylescript and everything worked like a charm. Might be you can do the same and than just eject? – Drag13 Apr 10 '22 at 08:08
  • Check everything again. If you need to, delete `node_modules` and run `yarn` again. I recommend holding off on jumping on react 18 just yet, and just using the `create-react-app` tool with [typescript](https://create-react-app.dev/docs/adding-typescript/) support. It looks like the team behind create-react-app, are already getting it [ready](https://github.com/facebook/create-react-app/commit/2eef1d0a1db2e84cdcd6e7ca941c85a48cc7cc65) to support react 18, and they will have an [upgrade guide](https://create-react-app.dev/docs/updating-to-new-releases) to follow when it is ready – smac89 Apr 10 '22 at 08:23

1 Answers1

1

Took me way too long to figure this out last week. In react-dom experimental.d.ts file:

To load the types declared here in an actual project, there are three ways. The easiest one, if your tsconfig.json already has a "types" array in the "compilerOptions" section, is to add "react-dom/experimental" to the "types" array.

So, add this to your tsconfig.json:

  "types" : [
    "react-dom/experimental"
  ]
Andy
  • 53
  • 1
  • 3
  • What is react-dom experimental? As I can see in react documentation they say this: Caution: This page is severely outdated and only exists for historical purposes. React 18 was released with support for concurrency. However, there is no “mode” anymore, and the new behavior is fully opt-in and only enabled when you use the new features. So I'm not so sure about this approach.. – Wings Apr 15 '22 at 07:35