'Slide' cannot be used as a JSX component.

See original GitHub issue

In NEXT.js when i try make build i get the following error:

Type error: 'Slide' cannot be used as a JSX component.
  Its instance type 'Slide' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/home/akerman/Documentos/sandbox/teslo-shop/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
          Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props

I already followed the repository instructions for typescript, which is down. That’s where I got this from.


  declare module 'react-slideshow-image' {
    export class Zoom extends React.Component<ZoomProps & any, any> {
        goBack(): void;
        goNext(): void;
        goTo(index: number): void;
    }
    export class Fade extends React.Component<SlideshowProps & any, any> {
        goBack(): void;
        goNext(): void;
        goTo(index: number): void;
    }
    export class Slide extends React.Component<SlideshowProps & any, any> {
        goBack(): void;
        goNext(): void;
        goTo(index: number): void;
    }
    export interface SlideshowProps {
        duration?: number,
        transitionDuration?: number,
        defaultIndex?: number,
        indicators?: boolean | function,
        prevArrow?: object | function,
        nextArrow?: object | function,
        arrows?: boolean,
        autoplay?: boolean,
        infinite?: boolean,
        onChange?(oldIndex: number, newIndex: number): void,
        pauseOnHover?: boolean,
        slidesToShow?: number,
        slidesToScroll?: number,
        canSwipe?: boolean,
        easing?: string,
        cssClass?: string
    }
    export interface ZoomProps extends SlideshowProps {
        scale: number
    }
  }

in types/react-slideshow-image/index.d.ts but not work… thx

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
femioladejicommented, May 8, 2022

I’ve tried replicating this issue but I couldn’t. Can I see what your package.json looks like? Also did you check this out perhaps the solution there may also resolve the problem

1reaction
femioladejicommented, May 3, 2022

Hi all, sorry for the delay in fixing this. I had to switch laptops recently and I’m still in the setup phase. I’ll look into it this weekend

Read more comments on GitHub >

github_iconTop Results From Across the Web

Slider - cannot be used as a JSX component. · Issue #656
error TS2786:'Slider ' cannot be used as a JSX component. Its instance type '{ [x: string]: any; componentDidMount(): void; componentWillUnmount ...
Read more >
NPM package cannot be used as a JSX Component
I'm getting similar "TS2786: 'NumberFormat' cannot be used as a JSX component. Its instance type 'NumberFormat<unknown>' is not a valid JSX ...
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 >
cannot be used as a jsx component. its return type 'void' is not ...
But i cannot import it into App file. It is returning error as 'Login' cannot be used as a JSX component. Its return...
Read more >
pure-react-carousel - npm
A highly impartial suite of React components that can be assembled by the consumer to ... are used to create an aspect ratio...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found