getting to work in NextJS?

[a-rbsn]

Hey there — such a great tool for making text more visually appealing online.

I have used this in non-React based sites but am struggling to get it to work within React/NextJS/Gatsby based sites.

In Next I have tried this in my _app.js:

      <Script src='/balancetext.js' strategy='beforeInteractive' />
      <Script
        id='balance-text-script'
        strategy='afterInteractive'
        dangerouslySetInnerHTML={{
          __html: `
            balanceText();
          `,
        }}
      />

and I have also tried this in my pages:

import * as balanceText from "balance-text";
...
  useEffect(() => {
    balanceText();

    return () => {};
  }, []);

But none of these appear to work, even with the above, if I visit my site in browser and do balanceText(); in console, it picks up the command but isn't applied to any text that has the balance-text class, just gets completely ignored, any ideas?

[redmunds]

Anyone familiar with NextJS that can help out with this?

[redmunds]

I think the problem with your example is that the balanceText() function does not return anything. It updates elements in the document in place.

So, I think you'll need to execute it for each element that uses it, then retrieve the updated element, something like:

        dangerouslySetInnerHTML={{
          balanceText(elementId);
          __html: `
            document.getElementById(elementId).innerHtml;
          `,
        }}

[nuthinking]

I have the same problem. Why wouldn't it work, for instance, if triggered via console?

[nuthinking]

This package is working for me: https://www.npmjs.com/package/react-balance-text

[redmunds]

Possibly related: Text gets deleted / cut off (#152)

[giyeonkwon]

This works for me in NextJS.

// _document.tsx

<script src="https://cdnjs.cloudflare.com/ajax/libs/balance-text/3.3.1/balancetext.min.js" />
<script
  id="balance-text-script"
  dangerouslySetInnerHTML={{
    __html: `balanceText(".MuiTypography-root", {watch: true});`,
  }}
/>

[nuthinking]

@giyeonkwon Doing so you get Error: Synchronous scripts should not be used. See: https://nextjs.org/docs/messages/no-sync-scripts @next/next/no-sync-scripts

I made my own local js with the content from the library and load it async: