ReferenceError: require is not defined

[niklasgrewe]

Hi, i am using ScrollScene with Svelte and Sapper in a NodeJS Environment like this:

//my svelte component
<script>
   import { onMount } from 'svelte'
   import { ScrollScene } from 'scrollscene'
   import { gsap } from 'gsap'

   onMount(() => {
        const myTimeline = gsap.timeline({ paused: true })
        const domNode = document.querySelector('#element')
        const scrollTrigger = document.querySelector('.scroll-trigger-01')

         myTimeline.to(domNode, {
            x: -200,
            duration: 1,
            ease: 'power2.out',
          })

           const scrollScene = new ScrollScene({
           triggerElement: scrollTrigger,
           gsap: {
             timeline: tl,
             reverseSpeed: 4,
          },
     })
   })
</script>

But i always get the error: ReferenceError: require is not defined

How can i solve this? What do i need to do?

[jonkwheeler]

I've only used Svelte a few times. I'm not totally sure, but there's other people having this issue as well. See if doing this works? https://github.com/sveltejs/sapper/issues/724#issuecomment-504981089

[niklasgrewe]

@jonkwheeler thanks for sharing, but my clients rollup is already set to browser: true. I am still get this error...

i am using your repo, because when i am using the repo scrollmagic-plugin-gsap i get this error: https://github.com/epranka/scrollmagic-plugin-gsap/issues/9

Do you have any idea how I can solve this?

[niklasgrewe]

@jonkwheeler Sapper can also be used with Webpack... could it work with that?

[jonkwheeler]

It works with Webpack, I know this since I use Next.js and that uses Webpack.

I don't write Svelte so I don't know but maybe try doing something with this...

onMount(async () => {
  const module = await import("scrollscene");
  ScrollScene = module.ScrollScene;
});

[niklasgrewe]

@jonkwheeler update: the bug seems to be related to rollupjs and your code doesn't work for me in Svelte

I have now got it working with the plugin scrollmagic-plugin-gsap, but with gsap 2, because otherwise I always get the warning: "Tween was overwritten by another"

would you still recommend the plugin scrollmagic-plugin-gsap? After all, you've been working on it, as I've seen... or what should I do now?

[jonkwheeler]

There's no need to use scrollmagic-plugin-gsap if you're going to use this library. The whole point of this library is to combat the issue of using gsap with scrollmagic in a more modern (ESM) environment 🤟. This library is also compatible with both Gsap 2 and 3. I'd recommend removing scrollmagic-plugin-gsap, as you shouldn't need it.

[niklasgrewe]

@jonkwheeler ok thank you for your answer. I already understood that I should only use either this or the other library. But the question I am asking myself is: Which library should I use in Svelte?

Short summary: scrollmagic-plugin-gsap works with GSAP2, also with GSAP3. But when i use GSAP3 i always get an error on console: Tween was overwritten by another - it seems GSAP3 does not work properly with the library...

This Library works with GSAP3, but is not working for me in Svelte, because rollupjs have Problems with the require statement.

So should i take the time to get this library running under Svelte after all? Or should I rather use scrollmagic-plugin-gsap with GSAP2?

[jonkwheeler]

I have nothing to do with scrollmagic-plugin-gsap (you mentioned I was working on it, but I never have), so I can't answer that question.

[niklasgrewe]

@jonkwheeler ok thanks for your answer... so I have now decided to use this library. Can you help me make it work with rollupjs? I have already created an error in the rollup repo, but I don't get any helpful feedback. At stackoverflow, i have also already left a question, but without an answer.

As it seems, the file /dist/esm/scrollmagic-with-ssr.js is causing problems. The commonjs plugin cannot handle the require statement correctly:

var detect = require('is-client')
var scrollmagic = undefined
if (detect()) {
  scrollmagic = require('scrollmagic')
}

export default scrollmagic

Unfortunately a Sapper developer did not find a workaround here. Could you take a look at my test repo, after all you developed this library... You would really help me a lot with this...

update

also i found out the following... the error occurs only in thedist/esm/ folder, not in the dist/commonjs/ folder - is there a possibility that only the commonjs version is loaded? apparently rollup can not handle the esm version

[niklasgrewe]

it works in webpack 👍 but unfortunately not in rollupjs

[jonkwheeler]

I wish I could help more on this 😕 but it does seem it's not an issue with this library. I read on one thread it could be rollup config using a CJS parser on the ESM branch... Have you tried just importing the CJS build? You could import scrollscene/dist/commonjs and that would bypass any ESM code.

[niklasgrewe]

@jonkwheeler i imported the library like this:

import ScrollScene from 'scrollscene/dist/commonjs'
import { gsap } from 'gsap'

onMount(() => {
    const myTimeline = gsap.timeline({ paused: true });

    myTimeline.to(container, {
        x: -200,
        duration: 1
    })

    const scrollScene = new ScrollScene({
        offset: 0,
        duration: 100,
        gsap: {
            timeline: myTimeline
        }
    })
})

I get not the require issue, but this error on console:

Uncaught (in promise) TypeError: ScrollScene.Scene is not a constructor

Can we solve this?

---

And when i try to import the library like this:

import { ScrollScene } from 'scrollscene/dist/commonjs'

i get the error:

'ScrollScene' is not exported by node_modules/scrollscene/dist/commonjs/index.js

[jonkwheeler]

Strange workaround, but what if...

import scrollsceneLibrary from 'scrollscene/dist/commonjs'

...

const scrollScene = new scrollsceneLibrary.ScrollScene

...

Regardless, I don't love this because this won't Tree Shake, which is super beneficial. Maybe sticking with Webpack 7+ is the right call.

[davidwebca]

I'm facing the same problem right now and the issue comes from Scrollscene.js. It imports "scrollmagic-with-ssr" which uses "require" all the time instead of using esm imports. Can I ask why that is? It must be to alleviate some other issue during building time, but I can't quite grasp why.

[jonkwheeler]

It's a copy pasta from this file: https://github.com/epranka/scrollmagic-with-ssr/blob/master/index.js

What's your setup?

p.s. This library is getting gutted in the future, but I just don't have time right now.

[davidwebca]

I just migrated from a webpack setup to a vite.js setup so my guess is that commonjs isn't supported or we can't mix and match. I ended up fixing the issue by replicating the file by using es6 imports!