create react app react 18 with typescript

Question

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)

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
– Drag13, Commented Apr 10, 2022 at 8: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 support. It looks like the team behind create-react-app, are already getting it ready to support react 18, and they will have an upgrade guide to follow when it is ready — smac89
– smac89, Commented Apr 10, 2022 at 8:23

Andy · Accepted Answer · 2022-04-10 17:28:34Z

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"
  ]

answered Apr 10, 2022 at 17:28

Andy

731 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wings Over a year ago

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..

Collectives™ on Stack Overflow

create react app react 18 with typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related