document is not defined

[slim imp]

I am using a library called ScrollReveal and when I add this import ScrollReveal from 'scrollreveal' my website gives me this error document is not defined I think it's because of SSR, but I'm not sure how I can fix it.
Thank you

[minor arrow]

seems like scrollreveal is not SSR friendly, you'd want to load the package only on the client-side

some solution includes lazy + ClientOnly

[slim imp]

Is it possible to import a library with lazy? And do you know where I can read more about ClientOnly?

[minor arrow]

basically you'd want to make the component that uses that library to be "client-only". That's just one of the option

const MyScrollRevealComponent = lazy(() => import('./MyScrollRevealComponent'));

// ...
<ClientOnly>
  <MyScrollRevealComponent />
</ClientOnly>

The other thing is, to dynamically import scrollreveal and use it only in createEffect

onMount(async () => {
  const scrollreveal = await import('scrollreveal');

  // do stuff
});

[slim imp]

I did this, and the console.log works, but then I get scrollreveal is not define
I'm not sure how I fix it

[minor arrow]

well you're calling it out of reach

You know this wouldn't work right:

const a = () => {
  const message = "Hello World";
};
const b = () => {
  console.log(message);
};