Jump to content
Search Community

Remix App and GSAP (SSR)

iDVB test
Moderator Tag

Recommended Posts

Our issue sounds very similar to the NextJS one except we are using Remix (Client+SSR) erroring out on child modules like EasePack.

/node_modules/.pnpm/gsap@3.6.0/node_modules/gsap/EasePack.js:190

export var SlowMo = _createSlowMo(0.7);

Unexpected token 'export'

 

somehow the internal modules are not respecting the formats that the parent modules are being bundled with.

 

Part of what makes this more complex for us is that we have a custom react ui lib that has gsap as a peerDep, and then the consuming app brings in that custom lib as a dep and gsap in as a dep. It also import gsap locally in that project.

This all works when our consuming project is Gatsby (webpack) but for some reason gets the above error when the consuming project is a Remix one.

 

We have fiddled with trying to:

  • have Remix app imports like
    import { gsap } from 'gsap'
    import { ScrollTrigger } from 'gsap/ScrollTrigger'
    ---
    import { gsap } from 'gsap'
    import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
    ---
    import { gsap } from 'gsap/dist/gsap'
    import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
    ---
    import { EasePack, gsap } from 'gsap'
    import { ScrollTrigger } from 'gsap/ScrollTrigger'
    ---
    import { gsap } from 'gsap'
    import { EasePack } from 'gsap/EasePack'
    import { ScrollTrigger } from 'gsap/ScrollTrigger'
    gsap.registerPlugin(ScrollTrigger, EasePack)

    nothing seems to work

Link to comment
Share on other sites

Bear with me here as I don't know Remix at all!

 

But could I ask what you're doing here?

export var SlowMo = _createSlowMo(0.7);

Unexpected token 'export'


Also - what are the errors you're getting?

 

Can you access GSAP, or are you just having issues trying to get EasePack to work?

Link to comment
Share on other sites

We figured out the answer. We just needed to make sure all the gsap references in our custom ui lib are made to the UMD version of gsap.

Now everything compiles fine.

 

import { gsap } from 'gsap/dist/gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'

 

  • Like 5
Link to comment
Share on other sites

Hey there! I think this is a question for remix people. We can't dictate how third party tools handle imports.

From the remix docs

Quote

Why does this happen?

Remix compiles your server build to CJS and doesn't bundle your node modules. CJS modules can't import ESM modules.

Adding packages to serverDependenciesToBundle tells Remix to bundle the ESM module directly into the server build instead of requiring it at runtime.

Isn't ESM the future?

Yes! Our plan is to allow you to compile your app to ESM on the server. However, that will come with the reverse problem of not being able to import some CommonJS modules that are incompatible with being imported from ESM! So even when we get there, we may still need this configuration.


Sounds like remix doesn't support ES Modules, this isn't a GSAP quirk, just a common thing for frameworks that do server side rendering because of limited support in the past for ES Modules in a node environment. 

This isn't really an issue, you just have to make sure to use the UMD files located in the dist folder. That's why we provide lots of different file types.

Let me know if I'm missing something here, if there's anything we can do to make things easier we'd love to help!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...