Crash on render

[ghost]

Hello,

I want to use your Component in a project.

But when I want to use it, it tells me that I have reach Maximum update. It happend only when I use your Component and I check render without your library (only 2 render).

Errors :

 Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Uncaught TypeError: can't access property "disconnect", _this.observer is undefined

The above error occurred in the <TickerElement> component:
TickerElement@webpack-internal:///./node_modules/.pnpm/react-ticker@1.3.2_react-dom@18.0.0+react@18.0.0/node_modules/react-ticker/dist/index.es.js:287:19
div
Ticker@webpack-internal:///./node_modules/.pnpm/react-ticker@1.3.2_react-dom@18.0.0+react@18.0.0/node_modules/react-ticker/dist/index.es.js:494:19
div
div
CurrentSongRender@webpack-internal:///./components/modules/currentSong/CurrentSongRender.tsx:15:17
div
div
div
form
CurrentSongForm@webpack-internal:///./components/modules/currentSong/CurrentSongForm.tsx:95:23
div
CurrentSongEdit@webpack-internal:///./pages/current-song/[id]/index.tsx:60:69
AuthMiddleware@webpack-internal:///./components/layout/Layout.tsx:56:20
div
div
Layout@webpack-internal:///./components/layout/Layout.tsx:70:20
I18nHOC@webpack-internal:///./node_modules/.pnpm/rosetty-react@1.0.2/node_modules/rosetty-react/dist/rosetty-react.esm.js:16:18
QueryClientProvider@webpack-internal:///./node_modules/.pnpm/react-query@3.34.19_react-dom@18.0.0+react@18.0.0/node_modules/react-query/es/react/QueryClientProvider.js:39:16
SessionProvider@webpack-internal:///./node_modules/.pnpm/next-auth@4.3.1_react-dom@18.0.0+react@18.0.0/node_modules/next-auth/react/index.js:417:18
App@webpack-internal:///./pages/_app.tsx:95:21
ErrorBoundary@webpack-internal:///./node_modules/.pnpm/next@12.1.4_0204d69bf2f8579eb9ee18cac7cd6c1a/node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20638
ReactDevOverlay@webpack-internal:///./node_modules/.pnpm/next@12.1.4_0204d69bf2f8579eb9ee18cac7cd6c1a/node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23177
Container@webpack-internal:///./node_modules/.pnpm/next@12.1.4_0204d69bf2f8579eb9ee18cac7cd6c1a/node_modules/next/dist/client/index.js:323:24
AppContainer@webpack-internal:///./node_modules/.pnpm/next@12.1.4_0204d69bf2f8579eb9ee18cac7cd6c1a/node_modules/next/dist/client/index.js:822:20
Root@webpack-internal:///./node_modules/.pnpm/next@12.1.4_0204d69bf2f8579eb9ee18cac7cd6c1a/node_modules/next/dist/client/index.js:946:21

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Code :

/* eslint-disable @next/next/no-img-element */
/* eslint-disable @next/next/no-page-custom-font */
import { CurrentSongTheme } from '@prisma/client';
import Ticker from 'react-ticker';

export const CurrentSongRender = ({ theme, title, artist, album, image, isPlaying }) => {
  if (theme === CurrentSongTheme.default) {
    return (
      <div className="flex h-full w-full items-center">
        <div className="h-full">
          <img src={image} className="h-full rounded-md shadow-md" alt="album cover" />
        </div>
        <div className="h-[90%] w-full rounded-r-md bg-dark-100 pl-3 text-left">
          <Ticker>
            {({ index }) => (
              <>
                <h1 style={{ paddingRight: '0.5em' }}>This is the Headline of element</h1>
              </>
            )}
          </Ticker>
          {/* <Ticker>
            {({}) => (
              <>
                <p className="font-bold text-white">{title}</p>
              </>
            )}
          </Ticker> */}
        </div>
      </div>
    );
  }

  return <></>;
};

Package.json :

"react": "18.0.0",
"react-dom": "18.0.0",
"react-ticker": "^1.3.2",

Thanks for your help ! ^^

[CruiseDevice]

@qlaffont-flexper were you able to solve this?

[qlaffont]

Unfortunately no. Finally i remove the library :/

[reedislost]

anyone find a solution to this?

[JoolianGarcia]

@qlaffont did you find an alternative that works with next?

[qlaffont]

Finally I used a CSS ticker :

 <div style={{ overflow: isScrollable ? 'hidden' : 'initial' }} ref={blockRef}>
      <div className={clsx(isScrollable ? 'ticker' : '', ' text-white')} style={{ animationDuration: `15s` }}>
        <p style={{ paddingRight: '0.5em', whiteSpace: 'nowrap' }} className="ticker_item" ref={ref}>
          {text}
        </p>
      </div>
    </div>

@keyframes ticker {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

$duration: 30s;

  .ticker {

    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    box-sizing: content-box;

    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
   -webkit-animation-name: ticker;
           animation-name: ticker;
    -webkit-animation-duration: $duration;
            animation-duration: $duration;

    &__item {
      display: inline-block;
      font-size: 2rem;
    }

}

[hongweitang]

FYI I had exactly the same issue on my Next.js build so I swapped it with this package react-fast-marquee. Works well and the code markup is much cleaner.

I hope that helps somebody else having issues here.

[JoolianGarcia]

I ended up doing the same, works great.

FYI I had exactly the same issue on my Next.js build so I swapped it with this package react-fast-marquee. Works well and the code markup is much cleaner.

I hope that helps somebody else having issues here.

[cyntler]

@JoolianGarcia @hongweitang @qlaffont @CruiseDevice @reedislost It looks like this library is not working with React 18 at the moment. I found a simple solution and I created a library to make it working: https://github.com/cyntler/render-with-react17.

You can install the library with npm i render-with-react17 and then use it in this way:

import Ticker from 'react-ticker';
import { RenderWithReact17 } from 'render-with-react17';

 <RenderWithReact17>
        <Ticker
              mode="await"
              speed={10}
              direction="toLeft"
              offset="run-in"
        >
               {() => <p>{description}</p>}
        </Ticker>
</RenderWithReact17>

[melih10]

@cyntler Your. solution is not working. Because Ticker can't be loaded. It gives Ticker error.

[cyntler]

@melih10 Can you provide more informations about error and show your code?