'Carousel' cannot be used as a JSX component

[jason-liu22]

Could someone help me, please?

react-multi-carousel@^2.8.0

Thanks in advance.

[vladimirmyshkovski]

Same error with the same version.

[vladimirmyshkovski]

@pyDjangoDev remove node_modules directory and yarn.lock or package-lock.json file and reinstall dependencies. In my case it's solve the problem.

[jason-liu22]

I just tried to do it in that way. but I still get the same error. Anyway, thanks @vladimirmyshkovski

[shaffi-ahuja]

@pyDjangoDev Were you able to resolve this issue... I am also facing the same

[Marthijs-Berfelo]

@pyDjangoDev @shaffi-ahuja I encountered the same issue with an older version however only when running a different NODE version.

• using latest LTS: v16.16.0 the problem occurred
• using older version: v16.10.0 no problem

UPDATE

even NODE versions v16.15.0 and v16.15.1 work for me.

[MuizU]

@pyDjangoDev @shaffi-ahuja I encountered the same issue with an older version however only when running a different NODE version.

• using latest LTS: v16.16.0 the problem occurred
• using older version: v16.10.0 no problem

UPDATE

even NODE versions v16.15.0 and v16.15.1 work for me.

This didn't work for me despite using all three versions.

[rortan134]

Try adding <></> (React.Fragment) wrapping the {} as a workaround like this:

<Carousel >
  <>
     {avatars.map((_) =>  /*...*/ )}
  </>
</Carousel />

See more: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051#issuecomment-567690424

[jason-liu22]

Try adding <></> (React.Fragment) wrapping the {} as a workaround like this:

<Carousel >
  <>
     {avatars.map((_) =>  /*...*/ )}
  </>
</Carousel />

See more: DefinitelyTyped/DefinitelyTyped#18051 (comment)

[jason-liu22]

@pyDjangoDev Were you able to resolve this issue... I am also facing the same

I didn't resolve it at that moment. so I used the react-slick, an alternative.

[MuizU]

It worked for me after I upgraded @types/react to 18.0.1

[sssuho]

write this code on the Component

{/ @ts-expect-error Server Component /} <CarouselPosts />

[eucciferri]

In my case I was able to solve this problem by updating the dependencies of the packages, executing the command: yarn upgrade

[zhenglib]

I had same issue, and I solved it with node v 16.13.0

1. Remove node_modules
2. nvm use 16.13.0
3. npm i --save
4. npm start

This solved my issue.