Broken Node Env [fixed-ish]

[zadamg]

Can I get some help?

I have been using this and it's worked great... up until I deleted my node_modules folder and tried to reinstall it using the bonus tar I still have, using the same instructions.   I have not changed the imports.  All I have done is altered package.json and package-lock and reinstalled gsap.

Now, my app has exploded.  I've spent hours trying to fix it and am losing it.... please someone help.  It's not "es module" stuff.. as suggested in another thread.  It's something else.   I'm in a sveltekit environment and nothing has changed other than reinstalling gsap using the npm install ./tar command in the docs.

______________

5:08:25 PM [vite] Error when evaluating SSR module /src/lib/components/Hero.svelte: failed to import "gsap/ScrollTrigger"
|- C:\Users\ryzen\Documents\WoNdErLaNd\Personal\creative-briefer\peachy_brief\node_modules\gsap\ScrollTrigger.js:12
import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:74:18)
    at wrapSafe (node:internal/modules/cjs/loader:1141:20)
    at Module._compile (node:internal/modules/cjs/loader:1182:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Module._load (node:internal/modules/cjs/loader:922:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:167:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

5:08:25 PM [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "/src/lib/components/Hero.svelte"
|- C:\Users\ryzen\Documents\WoNdErLaNd\Personal\creative-briefer\peachy_brief\node_modules\gsap\ScrollTrigger.js:12
import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:74:18)
    at wrapSafe (node:internal/modules/cjs/loader:1141:20)
    at Module._compile (node:internal/modules/cjs/loader:1182:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Module._load (node:internal/modules/cjs/loader:922:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:167:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Internal server error: Cannot use import statement outside a module
      at internalCompileFunction (node:internal/vm:74:18)
      at wrapSafe (node:internal/modules/cjs/loader:1141:20)
      at Module._compile (node:internal/modules/cjs/loader:1182:27)
      at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
      at Module.load (node:internal/modules/cjs/loader:1081:32)
      at Module._load (node:internal/modules/cjs/loader:922:12)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:167:29)
      at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
🕳
C:\Users\ryzen\Documents\WoNdErLaNd\Personal\creative-briefer\peachy_brief\node_modules\gsap\ScrollTrigger.js:12
import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:74:18)
    at wrapSafe (node:internal/modules/cjs/loader:1141:20)
    at Module._compile (node:internal/modules/cjs/loader:1182:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Module._load (node:internal/modules/cjs/loader:922:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:167:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

  

[GreenSock]

Ugh, that sounds frustrating!

 

It's super difficult for us to troubleshoot without a minimal demo, but here are some ideas: 

• Try deleting your lock file and clearing your npm cache? 
• It seems like there may be some kind of configuration issue on your end that allows your environment to recognize ES modules(?)
• Try importing the UMD files instead of ES Modules by using the /dist/ folder: 

  import gsap from "gsap/dist/gsap";
  import ScrollTrigger from "gsap/dist/ScrollTrigger";

   

[zadamg]

16 minutes ago, GreenSock said:

Ugh, that sounds frustrating!

 

It's super difficult for us to troubleshoot without a minimal demo, but here are some ideas: 

• Try deleting your lock file and clearing your npm cache? 
• It seems like there may be some kind of configuration issue on your end that allows your environment to recognize ES modules(?)
• Try importing the UMD files instead of ES Modules by using the /dist/ folder: 

  import gsap from "gsap/dist/gsap";
  import ScrollTrigger from "gsap/dist/ScrollTrigger";

   

Yeah, I know.. I was trying to think of a way to share a minimal demo, but the problem might be inside either a file or directory that is in .gitignore, thus I don't have any changes to compare and there is no real.. "minimal" example I could think of since I couldn't identify what the issue is.  I did try your solution, per another thread, also related to svelte.  It didn't work, however, and I got the same error, but with a different "js" file deeper in the package that is imported by ScrollTrigger.  So something got really messed up somehow, maybe in the package plan? I'm not exactly sure.   I did fix it; by downloading a whole zip of a recent, working commit, ran npm install, and it works again.

I wish I could give more information so it's helpful for other Svelte travelers who see this; I think it either has something to do with svelte and/or vite's build process and my deleting the node_modules folder and trying to just reinstall broke something. Or, I think maybe it has something to do with package_lock.json... in my breaking commit, some type definitions deleted a "license": "MIT" key/value pair and replaced it with "resolved" and integrity"...

 

"node_modules/@types/gsap": {
		"version": "3.0.0",
		"license": "MIT",  // ❌ removed in breaking commit
		"resolved": "https://registry.npmjs.org/@types/gsap/-/gsap-3.0.0.tgz",      // ✅ added in breaking commit
		"integrity": "sha512-BbWLi4WRHGze4C8NV7U7yRevuBFiPkPZZyGa0rryanvh/9HPUFXTNBXsGQxJZJq7Ix7j4RXMYodP3s+OsqCErg==",   // ✅ added in breaking commit
		"deprecated": "This is a stub types definition. gsap provides its own type definitions, so you do not need this installed.",   // ✅ added in breaking commit
		"dependencies": {
		"gsap": "*"
		}
		},

[zadamg]

I'm back... I recreated it consistently... 



Interestingly; the deprecation notice/key says I can remove types.  I did an npm uninstall @types/gsap, which removed the above entry entirely from my package_lock.json and recreated the same error:

7:06:14 PM [vite] Error when evaluating SSR module /src/lib/components/Hero.svelte: failed to import "gsap/ScrollTrigger"
|- C:\Users\ryzen\Documents\WoNdErLaNd\Personal\creative-briefer\peachy_brief\node_modules\gsap\ScrollTrigger.js:12
import { Observer, _getTarget, _vertical, _horizontal, _scrollers, _proxies, _getScrollFunc, _getProxyProp, _getVelocityProp } from "./Observer.js";


Anyway, I have it fixed now on my end, so hopefully this recreation helps someone else.  

[GreenSock]

Oh you definitely should NOT be using that @types/gsap thing - it's not from GreenSock. Someone else created those. https://www.npmjs.com/package/@types/gsap

 

You said you could create the error consistently...did you share how exactly? Did I miss that? Got a minimal demo? 

[zadamg]

2 minutes ago, GreenSock said:

Oh you definitely should NOT be using that @types/gsap thing - it's not from GreenSock. Someone else created those. https://www.npmjs.com/package/@types/gsap

 

You said you could create the error consistently...did you share how exactly? Did I miss that? Got a minimal demo? 

Well poop on a stick; that's good to know.

I don't; but I think my "recreation" was actually me running the "npm uninstall @gsap/types", which in retrospect isn't a recreation of my original problem persay... just me deleting the official gsap types when I shouldn't have.  But it gave the same error, so maybe that is the recreation since I originally deleted my node_modules folder and tried to do an npm install again; perhaps it was a types package mix up due to this old package I had still lurking in my package or something.

Instead, I've now just deleted the fake types package entry from my package_lock (the one above) and no errors. 

I'd make a minimal example, but it's kind of of a bear to disentangle this app just so it can run minimally =/.  It's not very small.
 

[GreenSock]

So did you get it all resolved now? Is there anything else you need help with? 

[Rodrigo]

Hi,

 

You mentioned that you deleted your node_modules folder before running into this issue while trying to install the dependencies. Did you deleted your package-lock.json file as well?

 

I've never ran into something like this, but maybe that could help.

 

Happy Tweening!