Import SplitText Error

[John Polacek]

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?

[OSUblake]

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.

 

[John Polacek]

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.

 

 

 

 

 

[OSUblake]

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.

[Osemwengie Benjamin]

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

 

[mvaneijgen]

@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

[Juli Scapucin]

Changing the install command on Vercel worked for me. Thanks a lot @John Polacek 🙌🏼