Fixing Typescript error: error TS2304: Cannot find name ‘React’.

If you try to do an import in Typescript, you can get an error like this:

index.tsx(10,25): error TS2304: Cannot find name 'React'.

In order to do an import successfully, you probably did something like below, or set up tsconfig.json (either should work):

/// 

When you write the Javascript code, it should look similar to the following:

Garys-MBP:youtube gary$ cat app/index.tsx
import * as React from 'react';
 
interface IMessage {
  msg: String;
}
 
class TestApp extends React.Component<IMessage, {}> {
  public render(): Element {
    return <div>test</div>;
  }
}

If you’re receiving the above error, the most likely cause is that you have a case-sensitivity issue: either you’re alternating case in Javascript class names, or you installed “React” with npm but reference it as “react” in your import (make sure you are consistent within your project, or this will fail hard)

Interested in JavaScript? I send out weekly, personalized emails with articles and conference talks. Click here to see an example and subscribe.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *