Using splitText, got this error: "Cannot use import statement outside a module"

[Vander]

Hello buds

 

I think i've found an error using astro and gsap(?). I've found something similar in Nuxt but I wasn't able to solve it by myself (sorry :/ )

 

Thing is, i've registered SplitText plugin and created and astro component, imported module and everything was working ok. Then, I translated the astro component to Vue component and my problems appeared. I get an error saying "Cannot use import statement outside a module", but i added "type="module" to the component and package.json and still getting the error

I'm not sharing my .npmrc file for obvious reasons haha
 

Does anyone know how to solve it or what i'm doing wrong?  

 

Thanks!

 

package.json:

Vue component:

Error:

More info about the error:

 

[GreenSock]

It's pretty tough to diagnose just by looking at some error messages, but it sounds like you must have some code referencing SplitText in your framework that's getting compiled down and your build system doesn't understand modules. Perhaps try changing your import statements to reference the UMD files in the /dist/ directory, like: 

// old
import SplitText from "gsap/SplitText";

// new
import SplitText from "gsap/dist/SplitText";

 

Also, I believe that browsers require your imports to end in ".js" and refer to a valid location when you use type="module" in your <script> tag. 

 

By the way, did you sign up for a Club GreenSock in a different account? I don't see a membership associated with your account. I'm curious how you got access to SplitText. 

[Vander]

56 minutes ago, GreenSock said:

It's pretty tough to diagnose just by looking at some error messages, but it sounds like you must have some code referencing SplitText in your framework that's getting compiled down and your build system doesn't understand modules. Perhaps try changing your import statements to reference the UMD files in the /dist/ directory, like: 

// old
import SplitText from "gsap/SplitText";

// new
import SplitText from "gsap/dist/SplitText";

 

Also, I believe that browsers require your imports to end in ".js" and refer to a valid location when you use type="module" in your <script> tag. 

 

By the way, did you sign up for a Club GreenSock in a different account? I don't see a membership associated with your account. I'm curious how you got access to SplitText. 

Sure, i'll try to change the import statement as soon as I arrive at my work computer tomorrow morning(I forgot to push changes to git lol)

 

I think i've tried the ".js" ending, but was failing also. I'll also try it!

 

About the account, yeah, i signed up in my work account. I like to have stuff separate in my personal acc and my working acc

 

I'll keep you updated, thanks! :)

[Vander]

10 hours ago, GreenSock said:

It's pretty tough to diagnose just by looking at some error messages, but it sounds like you must have some code referencing SplitText in your framework that's getting compiled down and your build system doesn't understand modules. Perhaps try changing your import statements to reference the UMD files in the /dist/ directory, like: 

// old
import SplitText from "gsap/SplitText";

// new
import SplitText from "gsap/dist/SplitText";

 

Also, I believe that browsers require your imports to end in ".js" and refer to a valid location when you use type="module" in your <script> tag. 

 

By the way, did you sign up for a Club GreenSock in a different account? I don't see a membership associated with your account. I'm curious how you got access to SplitText. 

Yeah, changing the import to gsap/dist/SplitText makes it work.

 

Is this an error from astro then? Should I write them?

 

Thanks

[GreenSock]

I'm glad that worked!

 

I'm not sure it's an "error" per se - it sounds like their build system just hasn't been modernized to recognize modules or maybe there's a configuration step on your end that you missed that allows your build tool to compile things in the proper order. It's worth asking the Astro folks maybe. 

 

Good luck!

[sophietate]

maybe the file name you declared is wrong

[Vander]

12 minutes ago, sophietate said:

maybe the file name you declared is wrong

Which one?