error TS2602: JSX element implicitly has type 'any' because the global type 'JSX.Element' does not exist

Even though I've installed & referenced the Typings library 'react' like this

/// <reference path="../../../typings/browser.d.ts" />

I'm still getting the error below:

Is there another Typings library I should be installing as well?

I solved this issue by reloading VSCode.

Ctrl + p > Developer: Reload Window

I resolved this issue by installing the react type definition.

Try to run yarn add --dev @types/react

There are two versions of React available in Typings. I've seen this issue with typings install react and using noImplicitAny.

I resolved this by installing the global version: typings install dt~react --global

Try run this:

1. npm i @types/react --save-dev

2. npm i @types/react-dom --save-dev

Works for me.

Put this configuration in the tsconfig.json file so that the ts server does not recognize that type of errors

{
    "compilerOptions": {
        "outDir": "build/dist",
        "module": "commonjs",
        "target": "es5",
        "lib": ["es6", "dom"],
        "sourceMap": true,
        "allowJs": true,
        "jsx": "react",
        "moduleResolution": "node",
        "rootDir": "src",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "strictNullChecks": true
    },
    "exclude": [
        "node_modules",
        "build",
        "scripts",
        "acceptance-tests",
        "webpack",
        "jest",
        "src/setupTests.ts"
    ],
    "types": [
        "typePatches"
    ]
}

I had a similar issue and after reading the other soltutions I looked at my tsconfig.json and aparently it (vs-code) complained about a minor error in my config and when I corrected that, it went away.

So main take away: Check that you have no errors in the tsconfig

Note
I am not sure the error was relevant, but vs-code complained that checkJs was defined (no set to false) when my allowJs was set to false. So basically my solution was to set both allowJs and checkJs to false:

{
  "compilerOptions": {
    ...
    "allowJs": false,
    "checkJs": false,
    ...
  }
}

I faced the same issue, updated the tsconfig.json into the below code and restarted the server worked for me.

{
  "compilerOptions": {
    "target": "ES2016",
    "declaration": false,
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "allowJs": false,
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "keyofStringsOnly": true,
    "lib": ["es2015", "es2017", "dom"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "jsx": "react"
  }
}

I also needed to add npm i @types/react-dom --save-dev to fix this.

Run:

npm i -D @types/react @types/react-dom

Then make sure you have the following in your tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

This should ideally solve the problem, if not, try reloading the window.

Cheers!

If you are using Vue 2 with "Volar" (Vue 3), disable it for the workspace.

This is happening because your Typescript IntelliSense is not working properly. To fix this just close and reopen your code editor and everything works like a charm!

From the handbook, React must have a capital letter. The code in the question clearly does not.