Configure TypeScript for React and JSX

Share this video with your friends

TypeScript and React go very well together, but it does require a little bit of configure on the TypeScript side due to the nature of JSX. The compiler option for JSX just needs to be set to "react" in the tsconfig.json and you're on your way.

Camilo Rivera

~ 4 years ago

After adding "jsx": "react" to my tsconfig.json file, I start getting this linting error on VS Code:

Module '"/.../node_modules/@types/react/index"' can only be default-imported using the 'esModuleInterop' flag ts(1259)
index.d.ts(65, 1): This module is declared with using 'export =', and can only be used with a default import when using the 'esModuleInterop' flag.

Adding "esModuleInterop": true to the tsconfig.json file seems to fix it:

{
    "compilerOptions": {
        "jsx": "react",
        "esModuleInterop": true,
    }
}

Tomasz Łakomy

~ 4 years ago

@Camilo - that's right, check out this StackOverflow answer for more details: https://stackoverflow.com/questions/56238356/understanding-esmoduleinterop-in-tsconfig-file