search

markusenglund / react-switch

A draggable toggle-switch component for React. Check out the demo at:
https://react-switch.netlify.com/
MIT License
1.33k stars 101 forks source link

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

Closed Cutshadows closed 2 years ago

Cutshadows commented 2 years ago

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

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

altugcelik commented 2 years ago

we are facing the same error error .

martavis commented 2 years ago

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 🤷

Cutshadows commented 2 years ago

this is crazy but i installed the same package with npm and i dont see error. But i installed with Yarn and errors appeared with JSX.

I applied recommendation line with Yarn environment. I have "good result". Thanks.

errors also appeared in these libraries react-spring, react-tooltip

Cutshadows commented 2 years ago

image

` declare class ReactSwitch extends React.Component< ReactSwitchProps & allowedHTMLinputProps

{ return (

<>
  { 
    children.map((child, i, arr)=>{
      if (i + 1 === arr.length) return child
      return {child}
    })
  }
</>

);

}

export default ReactSwitch;

`

I implemented this line of code in the library that is in node_modules and it was solved.

jeroen-hoekstra commented 2 years ago

Maybe this will help. See link.

ThienTranDuy commented 1 year ago

add ts-ignore:

{/// @ts-ignore /} Dark Mode: