GSAP ScrollTrigger cannot be imported as module in build

Environment

Nuxt CLI v3.0.0-27383920.81ee59c Nuxt project info:

---

• Operating System: Darwin
• Node Version: v17.3.1
• Nuxt Version: 3.0.0-27383920.81ee59c
• Package Manager: yarn@1.22.15
• Bundler: Vite
• User Config: build
• Runtime Modules: -
• Build Modules: -

---

Reproduction

npm i gsap

<script setup lang="ts">
import {gsap} from 'gsap'
// even though importing gsap like "import gsap from 'gsap'"
// is valid, it throws the error gsap.registerPlugin is not a function
// when running the production build
import ScrollTrigger from 'gsap/dist/ScrollTrigger'
// over here, the error is "Did you mean to import gsap/dist/ScrollTrigger.js?"
// Once it's done, it works, but there no longer is any typescript support
gsap.registerPlugin(ScrollTrigger)
</setup>

Describe the bug

Build errors

Additional context

No response

Logs

No response

[Zielgestalt]

This worked for me (combination of answers before):

In nuxt.config.ts:

build: {
    transpile: ['gsap']
}

in app.vue:

<script setup lang="ts">
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger)

function addScrollClass() {
  ScrollTrigger.create({
    // markers: true,
    start: '200px top',
    trigger: 'body',
    toggleClass: { targets: '.navbar-main', className: 'is-scrolled' },
  })
}

onMounted(() => {
    addScrollClass()
})
</script>

[chrispreisler]

@StevenJPx2 you are correct, sorry I overread your need for TS support.