iDVB Posted February 17, 2023 Posted February 17, 2023 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/[email protected]/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
Cassie Posted February 17, 2023 Posted February 17, 2023 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?
iDVB Posted February 17, 2023 Author Posted February 17, 2023 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' 5
aramz Posted February 25, 2023 Posted February 25, 2023 Thank you! Any thoughts from anyone on this long term, is this something that will change soon?
Cassie Posted February 25, 2023 Posted February 25, 2023 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! 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now