Text gets deleted / cut off

[Teddarific]

First of all, thanks for open sourcing this!

I'm not sure how, but text is being truncated / deleted from the DOM in my production build. The full text here is supposed to be "The link in bio that increases your conversions". Here is a video that demonstrates as the resize happens, content just straight up gets deleted.

Bug.Demo.mov

Posting this mainly to try to understand why content is being straight up deleted.

Reproduce Scenario (including but not limited to)

I can't reproduce locally, but it happens on my NextJS production build.

Steps to Reproduce

Can see it on this page here.

Can't reproduce locally however.

Platform and Version

Using Next.js

Sample Code that illustrates the problem

This is how I'm using it in my NextJS app:

import balanceText from 'balance-text'
import React, { useEffect, useRef } from 'react'

export function CustomBalanceText({ children }: { children: React.ReactNode }) {
  const spanRef = useRef<any>(null)

  useEffect(() => {
    const handleResize = () => {
      if (spanRef) {
        balanceText(spanRef.current)
      }
    }

    handleResize()
    window.addEventListener('resize', handleResize)

    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [spanRef])

  return <span ref={spanRef}>{children}</span>
}

// And using it like:
<CustomBalanceTExt>
   {content}
</CustomBalanceText>

Other Attempts

I've also tried using react-balance-text and using the CDN to the same result, leading me to believe there's an issue with this package. It's odd to me that no one has run into this before though, so might be a setup issue.

[redmunds]

I am not familiar with NextJS, but there is another bug (#151) that also reports having problems with NextJS. Maybe it's related?