GSAP registerPlugin breaking import

ThatXliner commented 10 months ago

Astro Info

StackBlitz:

Astro                    v4.0.8
Node                     v18.18.0
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             none

Repro on my machine:

Astro                    v4.0.8
Node                     v21.3.0
System                   macOS (arm64)
Package Manager          bun
Output                   static
Adapter                  none
Integrations             @astrojs/svelte
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

Likely all browser, as this is a build problem

Describe the Bug

I cannot run gsap.registerPlugin to notify GSAP of a new plugin. If I uncomment the line running gsap.registerPlugin, I get

SyntaxError: Cannot use import statement outside a module
  Stack trace:
    at internalCompileFunction (node:internal/vm:77:18)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at cjsLoader (node:internal/modules/esm/translators:356:17)
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)

What's the expected result?

the registerPlugin function call works without any errors.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-yprlj1?file=src%2Fpages%2Findex.astro

Participation

[ ] I am willing to submit a pull request for this issue.

ThatXliner commented 10 months ago

I looked at other issues:

https://github.com/withastro/astro/issues/1852 (original issue appears to have been fixed
https://github.com/withastro/astro/issues/7758 (issue closed without repro)
https://github.com/withastro/astro/issues/5530 (closed as it was not an issue with astro)
https://github.com/withastro/astro/issues/6299 (my issue happens even with "type": "module" added the the package.json)

ThatXliner commented 10 months ago

Interesting, this works in Astro components in a script type="module" block

---
// index.astro
---
<html>
<!-- ... -->
<script type="module">
    import { gsap } from "gsap";
    import { TextPlugin } from "gsap/TextPlugin";
    gsap.registerPlugin(TextPlugin);
</script>
<!-- ... -->
</html>

But if I put this in a top-level script tag in a Svelte component loaded via client:load it fails:

<script>
// Component.svelte
import { TextPlugin } from "gsap/TextPlugin";
</script>

---
// index.astro
import Component from './Component.svelte';
---
<Component client:load />

ThatXliner commented 10 months ago

it appears that this issue isn't specific to Astro

leolorenzoluis commented 9 months ago

@ThatXliner what was the issue?

ThatXliner commented 9 months ago

@ThatXliner what was the issue?

Importing GSAP plugins (for .registerPlugin) breaks when I try to import the package in a top level, but it won’t break when you dynamically import it during “runtime.”

For example, in Svelte, this would break:

<script>

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

gsap.registerPlugin(ScrollTrigger);
</script>

but this works:

<script>

import { gsap } from "gsap";
import { onMount } from "svelte";
onMount(async () => {

const { ScrollTrigger } = await import("gsap/ScrollTrigger");

gsap.registerPlugin(ScrollTrigger);
})
</script>

lameuler commented 4 months ago

if anyone finds this and still has the issue, one way I've found to fix it is by changing the vite config. I believe this tells vite to also bundle gsap for ssr so that gsap can also run on commonjs.

// in astro.config.mjs
... ,
vite: {
    ssr: {
        noExternal: [
            'gsap'
        ]
    }
}

https://gsap.com/community/forums/topic/29801-getting-error-cannot-use-import-statement-outside-a-module-when-importing-flip/#comment-189587

https://vitejs.dev/config/ssr-options#ssr-noexternal

withastro / astro