S2786: 'View' cannot be used as a JSX component.
See original GitHub issueEnvironment
Node version: v14.17.5 npm version: v7.21.1 Local ESLint version: v8.14.0 (Currently used) Global ESLint version: Not found Operating System: darwin 21.1.0
What parser are you using?
What did you do?
Configuration
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
"@typescript-eslint/ban-ts-comment": "off",
"prettier/prettier": "error"
},
"globals": {
"__DEV__": true
}
}
import React from 'react';
// @ts-ignore
import DoubleBounce from 'react-native-loader';
import {View} from 'react-native';
const DoubleBounceLoader: React.FC = () => (
<View>
<DoubleBounce size={16} color="#3A3A3A" />
</View>
);
export default DoubleBounceLoader;
What did you expect to happen?
Working eslint configuration
What actually happened?
TS2786: ‘View’ cannot be used as a JSX component. Its instance type ‘View’ is not a valid JSX element. The types returned by ‘render()’ are incompatible between these types. Type ‘import(“/Users/mikhailkiselyov/WebstormProjects/publife/node_modules/@types/react-native/node_modules/@types/react/index”).ReactNode’ is not assignable to type ‘React.ReactNode’. Type ‘{}’ is not assignable to type ‘ReactNode’.
Participation
- I am willing to submit a pull request for this issue.
Additional comments
No response
Issue Analytics
- State:
- Created a year ago
- Comments:14 (2 by maintainers)
Top Results From Across the Web
TS2786 'Component' cannot be used as a JSX component
Its instance type 'MessagesWidget' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type ' ...
Read more >ts2786: 'view' cannot be used as a jsx component. its ...
TS2786: 'View' cannot be used as a JSX component. Its instance type 'View' is not a valid JSX element. The types returned by...
Read more >Component cannot be used as a JSX component in React
The error Component cannot be used as a JSX component occurs for multiple reasons, returning an array of JSX elements instead of a...
Read more >3 Steps to Fix 'Stack.Navigator' cannot be used as a JSX ...
Navigator' cannot be used as a JSX component in React Native (expo, TS template). TL;DR. run yarn why @types/react pick ...
Read more >'SVG' cannot be used as a JSX component.
'SVG' cannot be used as a JSX component. Its instance type 'InlineSVG' is not a valid JSX element. The types returned by 'render()'...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I’m facing the same issue about this error. I add the below code to my package.json file.
Then, Run
yarn install
on a terminal.It works for me.
For me the issue was I was importing types explicitly when not needed: I removed two lines from the package.json: