Problem with Next 13 and initialization

[Jacob120]

Hello,

In my project I am using Next.js 13 and tailwind. I wanted to use just a carousel, I've copypasted code from the basic example and used useEffect likes this

import React, { useEffect } from 'react';
import { Carousel, initTE } from 'tw-elements';

const CarouselMain = () => {
  useEffect(() => {
    initTE({ Carousel });
  }, []);
  return (
  ...
  )
  } 

and in my main page index.js it looks like this

 import dynamic from 'next/dynamic';

const CarouselMainDynamic = dynamic(
  () => import('../src/components/features/CarouselMain/CarouselMain'),
  {
    ssr: false, 
  }
);

export default function Index() {
...
return (
  <div>
    <CarouselMainDynamic />
  </div>
)
}

When I load page it shows for a second, and it looks like when it loads that carousel component I got blank page and also in console.log there is an error that says nothing

next-dev.js:20 The above error occurred in the <div> component:

    at div
    at div
    at div
    at CarouselMain (webpack-internal:///./src/components/features/CarouselMain/CarouselMain.js:18:51)
    at LoadableComponent (webpack-internal:///./node_modules/next/dist/shared/lib/loadable.js:133:5)
    at div
    at div
    at Layout (webpack-internal:///./src/components/layout/Layout.js:17:23)
    at Index (webpack-internal:///./pages/index.js:42:19)

[AgathaJarynski]

+1

[Jacob120]

I will be grateful for some help or at least some hints how to fix this problem. Does anyone was able to use Carousel in next.js project?

[Trochonovitz]

Hi, we encounter enormous more errors with SSR frameworks and in fact couple other components (like Carousel) are not displaying properly in comparison to CSR frameworks.

All you got to do is import Tailwind Elements CSS file in global Next file (like _app.js/tsx) or in specific file, where you got the problematic components.

import "tw-elements/dist/css/tw-elements.min.css";

Error occurs because of inline style of Carousel elements. For now just delete style="backface-visibility: hidden" from components.