如何解决“ JSX 元素隐含类型‘ any’”错误？

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

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

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 resolved this issue by installing the react type definition.

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

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 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 solved this issue by reloading VSCode.

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

Then type: Developer: Reload Window

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

Try run this:

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


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

Works for me.

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.

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.

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

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.

ctrl + shift + p will Reload the window.

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