Adding <Message /> component to NextJS site

[StephenTangCook]

I tried adding a simple version of the <Message> component with empty blocks to my NextJS site. I added it in a client-side component (i.e. has 'use client'), like so:

    <Message
      time={new Date()}
      name="Your Company"
      logo="logo_url"
      blocks={[]}
    />

The page resulted with a runtime error:

Error: 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.

not-found-boundary.js:37 Uncaught 
Error: 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.
    at throwIfInfiniteUpdateLoopDetected (react-dom.development.js:26793:11)
    at getRootForUpdatedFiber (react-dom.development.js:7627:3)
    at enqueueConcurrentRenderForLane (react-dom.development.js:7549:10)
    at forceStoreRerender (react-dom.development.js:12049:14)
    at handleStoreChange (react-dom.development.js:12028:7)
    at eval (vanilla.mjs:14:39)
    at Set.forEach (<anonymous>)
    at setState (vanilla.mjs:14:17)
    at setHooks (index.mjs:193:24)
    at eval (index.mjs:1169:7)
    at commitHookEffectListMount (react-dom.development.js:21102:23)
    at commitHookPassiveMountEffects (react-dom.development.js:23154:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23259:11)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23334:13)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)

with warning:

jam-console-devtools.js:1 Warning: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.
    at PostDetail
    at PostDetailPage (Server)

[StephenTangCook]

@themashcodee any ideas what is happening? Any more details I can provide?

[themashcodee]

@StephenTangCook could you please provide your exact nextjs version to reproduce the issue.

[StephenTangCook]

I'm using next: 14.2.3.

Here's a stripped down repo with a NextJS site that reproduces the error: https://github.com/StephenTangCook/nextjs-blocks-test

The <Message> component is used here: https://github.com/StephenTangCook/nextjs-blocks-test/blob/main/src/components/MessageContainer.tsx

[themashcodee]

@StephenTangCook Thanks for reporting the issue, I had a bug. Fixed in v0.2.2.