When importing GSAP into my TypeScript project, the browser says it cannot find GSAP

Question

I am working on a TypeScript project using THREE.js and GSAP. This is my first TypeScript so maybe it's something obviously I am missing but whenever I import GSAP into my project I get an error in the browser.

The app is using express as the server and compiling the TypeScript code with

"dev": "concurrently -k "tsc -p ./src/server -w" "tsc -p ./src/client -w" "nodemon ./dist/server/server.js""

So every time I make a change it compiles the TypeScript in the /dist folder which is where my index.html file is.

I have tried a number of different GSAP plugins and import styles but I get the same issue every time. Here is an example of me importing gsap into my file.

import { gsap } from "gsap";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";
gsap.registerPlugin(DrawSVGPlugin);

Then when I go to the browser I get an error in the console saying this.

I don't know if I need to add anything to my tsconfig.json file maybe? I have a couple of configurations for some relative paths for THREE.js so maybe I need something similar for GSAP?

Here is my tsconfig.json file

{
"compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "outDir": "../../dist/client",
    "baseUrl": ".",
    "paths": {
        "/build/three.module.js": ["../../node_modules/three/src/Three"],
        "/jsm/*": ["../../node_modules/three/examples/jsm/*"]
    },
    "moduleResolution": "node"
},
"include": [
    "**/*.ts"
]
}

The in the express server I am adding those static files like so

app.use('/jsm/libs/dat.gui.module', express.static(path.join(__dirname, '../../node_modules/three/examples/jsm/libs/dat.gui.module.js')))

I hope this is easy but I a kind of lost on this one. I am also wondering if I maybe need to switch to webpack or something but I am trying to avoid it for now.

Answer 1

等待大神答复