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

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