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

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.

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

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

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

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;

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