Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Alien10999

"[rollup-plugin-dynamic-import-variables] Unexpected token" vite error when building

Go to solution Solved by OSUblake,

Recommended Posts

I've make a simple GSAP and ScrollTrigger animation for my website, but when I build it with Vite JS (which uses rollup to build) I get an error like this:

[rollup-plugin-dynamic-import-variables] Unexpected token (4:4)
file: [file]
error during build:
SyntaxError: Unexpected token (4:4)
    at Parser.pp$4.raise ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:16685:13)
    at Parser.pp.unexpected ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14195:8)
    at Parser.pp$3.parseIdent ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:16616:10)
    at Parser.pp$1.parseImportSpecifiers ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:15240:28)
    at Parser.pp$1.parseImport ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:15203:28)
    at Parser.pp$1.parseStatement ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14369:47)
    at Parser.pp$1.parseTopLevel ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14252:21)
    at Parser.parse ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14044:15)
    at Function.parse ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14075:35)
    at Graph.contextParse ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:20013:38)

Once removing some code to try and find the problem I get this error:

[commonjs] Unexpected token (1741:16) in [folders]/dev/node_modules/gsap/gsap-core.js
file: [folders]/dev/node_modules/gsap/gsap-core.js:1741:16
1739: 
1740:         this.totalTime(this.parent && !this.parent.smoothChildTiming ? this.rawTime() : this._tTime || this._pTime, this.progress() === 1 && (this._tTime -= _tinyNum) && Math.abs(this._zTime) !== _tinyNum); // edge case: animation.progress(1).pause().play() wouldn't render again because the playhead is already at the end, but the call to totalTime() below will add it back to its parent...and not remove it again (since removing only happens upon rendering at a new time). Offsetting the _tTime slightly is done simply to cause the final render in totalTime() that'll pop it off its timeline (if autoRemoveChildren is true, of course). Check to make sure _zTime isn't -_tinyNum to avoid an edge case where the playhead is pushed to the end but INSIDE a tween/callback, the timeline itself is paused thus halting rendering and leaving a few unrendered. When resuming, it wouldn't render those otherwise.
1741:       }
             ^
1742:     }
error during build:
SyntaxError: Unexpected token (1741:16) in [folders]/dev/node_modules/gsap/gsap-core.js
    at Parser.pp$4.raise ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:16685:13)
    at Parser.pp.unexpected ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14195:8)
    at Parser.pp.semicolon ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14172:64)
    at Parser.pp$1.parseExpressionStatement ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14651:8)
    at Parser.pp$1.parseStatement ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14386:24)
    at Parser.pp$1.parseBlock ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14667:21)
    at Parser.pp$1.parseStatement ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14351:34)
    at Parser.pp$1.parseIfStatement ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14497:49)
    at Parser.pp$1.parseStatement ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14340:31)
    at Parser.pp$1.parseBlock ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14667:21)

 

Here is how I'm importing it (I've found out that when I import the UMD version of gsap it works but then I don't get IDE intellisense):

 

import { gsap } from "gsap";
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

 

And the GSAP and ScrollTrigger code:

 

    gsap.to(document.getElementById("title-wrapper"), {
        scrollTrigger: {
            trigger: ".title-wrapper",
            end: window.innerWidth * 100,
            scrub: true,
            start: "top top",
        },
        x: window.innerWidth * 100,
    });

    if (window.innerWidth > 1240) {
        gsap.to(document.querySelectorAll(".resson"), {
            scrollTrigger: {
                trigger: "header",
                start: "top 40%",
                scrub: true,
            },
            y: -90,
        });
    }

 

I don't know why it doesn't work. Can you help? Thanks in advance!

Link to comment
Share on other sites

  • Solution
6 minutes ago, Alien10999 said:

[commonjs] Unexpected token (1741:16) in [folders]/dev/node_modules/gsap/gsap-core.js

 

It's using CommonJS, which means it doesn't support ES Modules. Try using the UMD files instead.

https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger#umd

 

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

gsap.registerPlugin(ScrollTrigger);

 

Link to comment
Share on other sites

14 minutes ago, OSUblake said:

 

It's using CommonJS, which means it doesn't support ES Modules. Try using the UMD files instead.

https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger#umd

 


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

gsap.registerPlugin(ScrollTrigger);

 

I did try it and it did work, but is there any way to get IDE intellisense in VS Code with the UMD module format?

Link to comment
Share on other sites

11 minutes ago, Alien10999 said:

I did try it and it did work, but is there any way to get IDE intellisense in VS Code with the UMD module format?

 

Not sure why it wouldn't work as the types are global.

 

You could try telling it where to search in your tsconfig/jsconfig.json.

{
  "compilerOptions": {
    ...
  },
  "files": [
    "node_modules/gsap/types/index.d.ts"
  ]
}

 

  • Like 2
Link to comment
Share on other sites

28 minutes ago, OSUblake said:

 

Not sure why it wouldn't work as the types are global.

 

You could try telling it where to search in your tsconfig/jsconfig.json.


{
  "compilerOptions": {
    ...
  },
  "files": [
    "node_modules/gsap/types/index.d.ts"
  ]
}

 

Thanks! Everything is working!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×