Reputation: 16762

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

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?

Upvotes: 182

Answers (26)

Marco Corbera

Reputation: 11

I've had this problem some times and hadn't been able to figure out when it happened. Checking some comments above I could realize that it happened when I was working with docker environments but didn't run npm install locally so I did it as some said before and it worked. If you are using docker maybe it could help

Upvotes: 0

Karl Adler

Reputation: 16786

Having this issue in VSCODE in combination with Yarn 3, you need to tell VScode to use the correct TS-Server.

Run yarn dlx @yarnpkg/sdks vscode
Open any TypeScript file
Press ctrl+shift+p
Choose "Select TypeScript Version"
Pick "Use Workspace Version"

Credits go here: https://stackoverflow.com/a/69238902/1059828

Upvotes: 2

Tiago Peres França

Reputation: 3215

For me, the problem was the compilerOptions.moduleResolution option in the file tsconfig.json. I set it to "Bundler" and it worked! I believe setting it to "Node" also works.

Upvotes: 0

Apoorv Bedmutha

Reputation: 1

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

Upvotes: 0

Tokimon

Reputation: 4142

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

Upvotes: 1

Patrick Mbugua

Reputation: 51

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.

Upvotes: 5

Daniel Dyrnes

Reputation: 1691

I resolved this issue by installing the react type definition.

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

Upvotes: 148

Kalnode

Reputation: 11286

Delete `node_modules` and run `npm install`

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

Upvotes: 0

Shivam Konkar

Reputation: 11

Run npm install this fixed issue for me

Upvotes: 1

Maycol Vivanco

Reputation: 1

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 !

Upvotes: 0

Shubham Verma

Reputation: 9923

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.

Upvotes: 7

Munir Shah

Reputation: 97

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

Upvotes: 2

Vasiliy Petruk

Reputation: 1

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

Upvotes: 0

Gustavo Máximo

Reputation: 6140

I solved this issue by reloading VSCode.

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

Then type: Developer: Reload Window

Upvotes: 444

Phạm Văn Thắng

Reputation: 1

ctrl + shift + p will Reload the window.

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

Upvotes: 0

Lucas Wiman

Reputation: 11217

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.

Upvotes: 1

user18191005

Reputation:

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

Upvotes: 4

Abdullah Khan

Reputation: 1473

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.

Upvotes: 26

leonheess

Reputation: 21361

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

Upvotes: 3

Vivek Kumar

Reputation: 113

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!

Upvotes: 6

Erik P_yan

Reputation: 788

Try run this:

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

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

Works for me.

Upvotes: 23

joonassandell

Reputation: 23

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

Upvotes: 0

Bekzat

Reputation: 180

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

Upvotes: 0

user7258344

Reputation:

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

Upvotes: 1