[ERROR] Cannot use import statement outside a module

[crimson mist]

have deleted astro/node_modules, cleared cache and deleted package-lock and reinstalled deps, no luck

[ripe jackal]

The error seems very straightforward. The import line is not in a module.

What is ScrollTrigger as it is on your page? A regular script element in your html? Inline or external?

something is missing a type=module

[crimson mist]

It's an import in a react component:

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

gsap.registerPlugin(ScrollTrigger, Draggable, InertiaPlugin);

export const Slider = () => {
  return <div className="">Test</div>;
};

^ This component breaks my build (commenting out ScrollTrigger fixes things)

This component does not:

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

gsap.registerPlugin(ScrollTrigger);

export const ProgressTracker = ({
  className,
  title,
}: {
  className: string;
  title?: string;
}) => {
  return (
    <div>
      Test
    </div>
  );
};

I have zero problems with the ProgressTracker - but the Slider component seems to break. I had another <Test> component that simply imported ScrollTrigger that was initially broken, then started working. I've copy pasted the Slider line for line into that now working file and it's working fine.

It's really odd. Fingers crossed it keeps working, but outside of copy pasting I've done nothing to fix this - same as last time 🤷‍♂️

[ripe jackal]

You have to tell us where your scripts are on the page. Are they inline in a script tag or src=? Are those script tags modules or not?

Don’t paste code from your Astro files. Paste source from your html

[crimson mist]

oh, in the astro parent?

[ripe jackal]

The build output

[crimson mist]

ah, ok. 1 sec

It's working now though, so I'm not sure if this'll throw anything useful up

hang on a sec, i'll break it again with that other component

Nope, that one is now working too. I'm baffled 😄

all i did was copy the code, comment it out, and then uncomment it

oh well, 3 hours of trying to debug this at least ended well! thanks for looking!

Empty slider component broke again. Copied an almost identical module into the slider component and it's working again 🤨