Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

'Switch' cannot be used as a JSX component. Its instance type 'ReactSwitch' is not a valid JSX element

See original GitHub issue

If you’re reporting a bug or incorrect behavior, please include:

The OS and browser where the bug is encountered
Chrome Version 100.0.4896.75 (Official Build) (arm64)

OSX M1 Pro
Version 6.0.0

A link to sandbox where the bug can be reproduced (fork this sandbox)
Steps to reproduce the bug

RuteOfFile/src/atoms/toggles/toggleSwitch/ToggleSwitch.tsx
TypeScript error in src/atoms/toggles/toggleSwitch/ToggleSwitch.tsx(35,5):
'Switch' cannot be used as a JSX component.
  Its instance type 'ReactSwitch' is not a valid JSX element.  TS2786

    33 |                        className={`flex justify-center items-center relative transition-all ${classNameContainer} ${(isLoading || isDisabled) ? 'pointer-events-none opacity-60' : ''}`}
    34 |                >
  > 35 |                        <Switch onChange={onChange} checked={checked} className={classNameSwitch} onColor={color} height={height} width={width}/>
       |                         ^
    36 |                        <LoaderIcon color={ICON_COLOR.BLACK} className={`absolute transition-all ${isLoading ? '-right-6 opacity-90' : '-right-0 opacity-0'}`} />
    37 |                </div>
    38 |        );


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

             "@craco/craco": "^6.1.1",
	"@emotion/react": "^11.1.5",
	"@fdograph/rut-utilities": "^1.3.7",
	"@headlessui/react": "^0.3.1",
	"@testing-library/jest-dom": "^5.11.4",
	"@testing-library/react": "^11.1.0",
	"@testing-library/user-event": "^12.1.10",
	"@types/jest": "^26.0.15",
	"@types/node": "^12.0.0",
	"@types/react": "17.0.0",
	"@types/react-dom": "^17.0.0",
	"axios": "^0.21.1",
	"copy-to-clipboard": "^3.3.1",
	"howler": "^2.2.3",
	"jwt-decode": "^3.1.2",
	"leaflet": "^1.7.1",
	"lodash.debounce": "4.0.8",
	"moment": "^2.29.1",
	"openpgp": "5.0.0-6",
	"pdf-lib": "^1.17.1",
	"react": "^17.0.1",
	"react-cookie": "^4.1.1",
	"react-device-detect": "^1.17.0",
	"react-dom": "^17.0.1",
	"react-flatpickr": "^3.10.7",
	"pdfmake": "0.2.4",
	"react-leaflet": "2.7.0",
	"react-query": "^3.13.0",
	"react-responsive-carousel": "^3.2.21",
	"react-router-dom": "^6.0.2",
	"react-scripts": "4.0.3",
	"react-select": "^5.1.0",
	"react-spring": "^9.2.4",
	"react-switch": "6.0.0",
	"react-toastify": "^7.0.3",
	"react-tooltip": "^4.2.21",
	"sass": "^1.32.8",
	"string-sanitizer": "^2.0.2",
	"swiper": "^6.5.9",
	"typescript": "^4.1.2",
	"universal-cookie": "^4.0.4",
	"uuid": "^3.4.0",
	"web-vitals": "^1.0.1"

https://stackblitz.com/edit/react-ts-wtvvz3?file=index.tsx

Issue Analytics

State:
Created a year ago
Comments:6

Top GitHub Comments

4reactions

martaviscommented, Apr 10, 2022

Same here. As a workaround I did this:

import WrongSwitch from 'react-switch';

const Switch = WrongSwitch as any; // TS has an issue with the return type

Not ideal but it’s just one extra line 🤷

1reaction

mariohandsomecommented, Nov 30, 2022

add ts-ignore:

{/*// @ts-ignore */} Dark Mode: <Switch onChange={handleChange} checked={isChecked} />

Top Results From Across the Web

Component cannot be used as a JSX component. Its return ...

A component needs to return a single root element. You can use fragments to package an array of elements as a single element, ......

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 ... Its return type 'Element[]' is not...

'switch' cannot be used as a jsx component. its ... - You.com

Its instance type 'Switch' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is ......

Component from NPM module cannot be used as a JSX ...

This is what the type error looks like: 'Component'(Name here) cannot be used as a JSX component. Its return type 'Element[]' is not...

DevExtreme component cannot be used as a JSX component ...

Its instance type 'Button' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. The code: Code....