John Polacek Posted September 10, 2021 Share Posted September 10, 2021 I'm running React/Next.js on my local machine. When I do this: import { SplitText } from "gsap/SplitText" Then do npm run dev Then I get this error: error - .../node_modules/gsap/SplitText.js:12 import { emojiExp, getText } from "./utils/strings.js"; ^ SyntaxError: Unexpected token { If I change my import to the following using the ol’ dist folder trick, we're all good. import { SplitText } from "gsap/dist/SplitText" gsap.registerPlugin(SplitText) I can live with that, until when I deploy to Vercel, I get a build fail with this error: ModuleNotFoundError: Module not found: Error: Can't resolve 'gsap/dist/SplitText' Am I missing something? 1 Link to comment Share on other sites More sharing options...
OSUblake Posted September 10, 2021 Share Posted September 10, 2021 Next.js does not support ES Modules by default. Maybe in the future. https://nextjs.org/blog/next-11-1#es-modules-support So you should import UMD files from the dist folder. About Vercel, we haven't had any people reporting an issue with it. How is it getting the member plugins? Are you using the tgz or private npm method? If you're doing the tgz method, make sure .tgz is not in your .gitignore file. 1 Link to comment Share on other sites More sharing options...
John Polacek Posted September 10, 2021 Author Share Posted September 10, 2021 It is strange because I can deploy to Vercel with: import { gsap } from "gsap" No problem, no need for /dist. I deploy and everything builds and animates, but for SplitText is needs /dist. Curious why that is? For deployment, you're right it is something with the member plugins. I'm doing the private npm route so it is probably getting tripped up with step 4 where you have to do `gsap@npm:@gsap/<package>` the first time. During a Vercel deployment, it just does `npm install` by default. Aha! That's it, just need to go into Vercel and set up a custom install command. npm install && npm install gsap@npm:@gsap/<package Probably worth updating your GSAP Installation docs in the NPM section there. Likely need a similar step for Netlify. 2 1 Link to comment Share on other sites More sharing options...
OSUblake Posted September 10, 2021 Share Posted September 10, 2021 13 minutes ago, John Polacek said: It is strange because I can deploy to Vercel with: import { gsap } from "gsap" That's really not importing the ES Module. The bundler is looking at GSAP's package.json, so it knows to get it from the dist folder. Unfortunately, you can't do the same for sub-folders. // gsap package.json { "module": "esm/index.js", "main": "dist/gsap.js", ... } And thanks for the tip! I'm going to add it the docs. 1 Link to comment Share on other sites More sharing options...
Osemwengie Benjamin Posted April 4, 2023 Share Posted April 4, 2023 On 9/10/2021 at 11:06 PM, John Polacek said: npm install && npm install gsap@npm:@gsap/<package I'm curious to know if this is all I should add to my next build. I get a registry error when I used npm install && npm install gsap@npm:@gsap/SplitText Link to comment Share on other sites More sharing options...
mvaneijgen Posted April 4, 2023 Share Posted April 4, 2023 @Osemwengie Benjamin SplitText is part of Club Greensock, see https://greensock.com/club/, eg this is only available if you're a paid member. Also check out the install page for more info on installing (gsap@npm:@gsap/SplitText is to my knowledge not a valid install command) https://greensock.com/docs/v3/Installation?checked=core,splitText#modules 1 Link to comment Share on other sites More sharing options...
Juli Scapucin Posted November 13, 2023 Share Posted November 13, 2023 Changing the install command on Vercel worked for me. Thanks a lot @John Polacek 🙌🏼 Link to comment Share on other sites More sharing options...
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