Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Getting "document is not defined" with Next.js #80

Open
shehzadasif opened this issue Dec 29, 2021 · 8 comments
Open

Getting "document is not defined" with Next.js #80

shehzadasif opened this issue Dec 29, 2021 · 8 comments

Comments

@shehzadasif
Copy link

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.

splitting error

@jeff-zhenz
Copy link

jeff-zhenz commented Dec 31, 2021

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

@shehzadasif
Copy link
Author

shehzadasif commented Dec 31, 2021 via email

@TomSmedley
Copy link

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
Copy link

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

@onopko81
Copy link

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

@joshtom
Copy link

joshtom commented May 17, 2022

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
Copy link

draZer0 commented Aug 19, 2022

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
Copy link

joshtom commented Aug 19, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants