How to solve "JSX element implicitly has type 'any' " error?

Question

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?

Sixpence

Answer 1

I solved this issue by reloading VSCode.

Ctrl+Shift+P -or- ⌘+shift+P

Then type: Developer: Reload Window

Cindicindie

I had this issue after upgrading from react-dom 16.x to 17. Reloading the window fixed the issue. Thanks! – Reine

Restarting TypeScript Language Server would probably be enough: CMD+P > Typescript: Restart TS Server (type in rets) – Germinative

it is ctrl+shift+P – Aksoyn

For me it was cmd + shift + p It looks like cmd + p without shift brings up file search for me – Lukasz

In VSCode the > character denotes a command. Alternatively, yes, you can use Ctrl + Shift + p and then type in Developer: Reload Window. – Cindicindie

Worked like a charm. I should've tried this before Googling. – Stricklin

Or just Crtl +R ? – Glide

Also closing and reopening fixes this. – Electrolyte

I've changed the answer to Ctrl+Shift+P because people were forgetting to use > after doing Ctrl+P. – Cindicindie

It would be good to understand what the underlying issue is. Does anyone understand what that was? – Kafir

I resolved this issue by deleting the project repository and cloning the repository again and running npm install command then start the project and it started working for me. – Histaminase

if you are using typescript, this will not help, you need to install the @types/react to fix this – Ataractic

Answer 2

I resolved this issue by installing the react type definition.

Try to run: npm install --dev @types/react or yarn add --dev @types/react

Vivianna

For npm, npm install --dev @types/react is worked – Bisexual

If you are using yarn with Typescript and do have node_modules, add Typescript support for your editor using Yarn. Run: yarn dlx @yarnpkg/sdks vscode. VSCode will prompt you to allow it. – Manfred

Do not forget to install Node first – Bullard

Thank you so much for sharing your solution! Your help is greatly appreciated and has made a significant difference for those who were facing the same issue. Your contribution to the community is valuable and your generosity in sharing your knowledge is commendable. Thanks again for your support! it worked for me. – Rote

Answer 3

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

Judaism

I really wish they'd consolidate their libraries. Having to deal with global \ ambient \ main conflicts in multiple places is an endless hassle for our team :( – Sixpence

I totally agree. I wish more vendors would publish their typings embedded in their libraries (like ImmutableJS) – Judaism

Answer 4

This is happening because your Typescript IntelliSense is not working properly.

1: To fix this just close and reopen your code editor and everything works like a charm!

2: There is another quick turnaround for this issue is just press (Windows: ctrl + shift + p) or (Mac: cmd + shift + p) then search Typescript:Restart TS server hit enter and done.

Tham

Tried this on Windows and works like a charm, thanks – Epanodos

Answer 5

Try run this:

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

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

Works for me.

Crissycrist

Worked for me too! It's also proposed by VS Code when you hover over the marked text. – Rundgren

Answer 6

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!

Fougere

Answer 7

You can install @types/react and @types/react-dom and then restart the window.

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

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

Step 3: Run Ctrl+Shift+P -or- ⌘+shift+P

Then type: Developer: Reload Window and press enter.

Toolis

I was playing with a React (TypeScript + SWC) app generated with vite and it didn't install react-dom. Step #2 helped here. – Daffie

Answer 8

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

Glide

Answer 9

Need to add vscode support if you are using yarn as your package manager.

Run the code below in your project's terminal:

yarn dlx @yarnpkg/sdks vscode

See https://yarnpkg.com/getting-started/editor-sdks.

Luftwaffe

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Briolette

thanks! works without the fullstop at the end yarn dlx @yarnpkg/sdks vscode – Auricular

Link to docs: yarnpkg.com/getting-started/editor-sdks – Contrite

Answer 10

For people getting this error in Deno or while getting started with Fresh framework a fiw for me was to disable the Deno extension in VS Code

Thomasinethomason

Answer 11

Just Reload the IDE/Code Editor. It will work fine.

Kenwood

Answer 12

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

Phlebosclerosis

must be "jsx": "react-jsx" – Mcelroy

React docs state that "jsx": "preserve" should suffice for most applications. Using this setting eliminated a couple other false errors for me. – Inflame

Answer 13

I had a similar issue and after reading the other solutions I looked at my tsconfig.json and apparently 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,
    ...
  }
}

Airhead

Which just disables type checking altogether for .js files. – Inflame

Answer 14

When this happened to me, the cause was running the app inside a docker image, but not having vscode point to that docker image. I ran npm run install to install the node_modules directory where vscode can see it. After that, the error disappeared.

Cran

Answer 15

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

Brittenybrittingham

Answer 16

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

Stepchild

Answer 17

ctrl + shift + p will Reload the window.

If using TypeScript using ctrl + shift + p will Reload TS Server

Namedropper

Answer 18

If you came here after updating vs code. Then you need to change the version of the typescript used in the settings. example

Couturier

I think that this is more a lack of the react library package. the typescript error would be correct, but it's missing information. @types/react covers this and adds the types typescript expects. – Edie

Answer 19

I got the problem in a Next.js project (v13.4.12).

After creating the project, this is what's inside package.json

package.json:

{
  "name": "01-firsts-steps",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.4.5",
    "@types/react": "^18.2.18",
    "@types/react-dom": "^18.2.7",
    "autoprefixer": "10.4.14",
    "eslint": "8.46.0",
    "eslint-config-next": "13.4.12",
    "next": "13.4.12",
    "postcss": "8.4.27",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6",
    "valibot": "^0.8.0"
  }
}

In page.tsx i got the warning:

JSX Element implicitly has any type 'any' because no interface 'JSX.IntrinsicElements' exists

To solve it, what I did was uninstall the packages: @types/react and @types/react-dom, using:

npm uninstall @types/react @types/react-dom

Finally, reinstall the packages:

npm install @types/react @types/react-dom

And that's it !

Forrestforrester

Answer 20

Run npm install this fixed issue for me

Carlin

Answer 21

for me, the reason was I forgot to run npm install after I cloned a NextJS project

Sori

Answer 22

Delete node_modules and run npm install

I could not pinpoint a specific issue, and doing this fixed the issue for me.

Hestia

Answer 23

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

Sixpence

Thought it was worth letting you know why you (or, future readers) got downvoted: only React components must use a capital letter, not html elements – Aerograph