Getting "document is not defined" with Next.js

[shehzadasif]

Hi there,

I was trying your awesome library that works seamlessly without any framework. I tried it with Next.js and no matter what I do, I am constantly getting the error as attached "document is not defined". Any idea on how to solve this issue and use it with next.js.

[jeff-zhenz]

see first section of this https://nextjs.org/docs/advanced-features/dynamic-import, splittingjs client-side work only

[shehzadasif]

Thanks for the reply, document error is resolved but I couldn't figure out the way to get data-splitting attributes working in this way. I will really appreciate a working demo for the same.

On Fri, 31 Dec 2021 at 11:13, Jeff Zhang @.***> wrote:

see first section of this https://nextjs.org/docs/advanced-features/dynamic-import, client-side work only

— Reply to this email directly, view it on GitHub https://github.com/shshaw/Splitting/issues/80#issuecomment-1003281636, or unsubscribe https://github.com/notifications/unsubscribe-auth/AW7WFILZJR4GKAHHFBEL5N3UTVCYRANCNFSM5K5URPBQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you authored the thread.Message ID: @.***>

[TomSmedley]

I'm having this issue with Svelte. I think since everything is moving over to Vite we really need a ESM module as well as IIFE.

[d-e-v-esh]

Yes, I am having the same issue with next.js. A working solution with dynamic imports will be really appreciated.

[onopko81]

Hi, try: const Splitting = null; if (typeof document !== undefined) Splitting = require('Splitting')

[joshtom]

Also having some difficulties to get it to work in NextJS.

I managed to bypass the document undefined using a dynamic import using

 const callSplitting = async () => {
    const Splitting = (await import("splitting")).default;
    if (splitRef) {
      let split_res = Splitting();
      setLines(split_res[0].el);
      console.log(`Split text into ${split_res[0].el} lines`);
    }
  };

And this

<div ref={splitRef} data-splitting="">
Content Here
</div>

But somehow, It's not just working. I would appreciate a solution regarding this @shshaw

[draZer0]

For anyone who is still struggling to use Splitting with Next.js, I combined all the answers from previous issues and I managed to get it working in with the following code:

import "splitting/dist/splitting.css";
import "splitting/dist/splitting-cells.css";

const Component = () => {

    let target;

    setTimeout(() => {
        if ( window && document && target ) {
            const Splitting = require('Splitting');
            Splitting({ by: "chars", target: target,  });
        }
    });

    return (
        <>
            <span ref={(el) => { target = el; }}>Lorem ipsum dolor sit amet</span>
        </>
    )
}

export default Component;

[joshtom]

For anyone who is still struggling to use Splitting with Next.js, I combined all the answers from previous issues and I managed to get it working in with the following code:

import "splitting/dist/splitting.css";
import "splitting/dist/splitting-cells.css";

const Component = () => {

    let target;

    setTimeout(() => {
        if ( window && document && target ) {
            const Splitting = require('Splitting');
            Splitting({ by: "chars", target: target,  });
        }
    });

    return (
        <>
            <span ref={(el) => { target = el; }}>Lorem ipsum dolor sit amet</span>
        </>
    )
}

export default Component;

Thank you for this @draZer0