stectix Posted January 4, 2023 Share Posted January 4, 2023 Hello All, I am getting a persistent error in my Vite + React +TypeScript environment on attempted import in all tsx files that require it: 'node_modules/@gsap/business/types/index.d.ts' is not a module. { "compilerOptions": { ... }, "files": [ "node_modules/@gsap/business/types/index.d.ts" ] } Has been added to tsconfig.json yet problem still continues. Import is: import { gsap } from '@gsap/business' What am I overlooking here? Thanks in advance for any assistance on this! Link to comment Share on other sites More sharing options...
Rodrigo Posted January 4, 2023 Share Posted January 4, 2023 Hi @stectix welcome to the GreenSock forums and thanks for being a Club GreenSock member! 🥳 I just created a simple React app with TS and the GSAP Business package and is working as expected using a couple of the bonus plugins, using this command: npm create vite@latest gsap-bonus-react-ts -- --template react-ts After that I created an .nmprc file and ran: npm install gsap@npm:@gsap/business The package.json file looks like this (the dependencies object at least): { "dependencies": { "gsap": "npm:@gsap/business@^3.11.4", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "@vitejs/plugin-react": "^3.0.0", "typescript": "^4.9.3", "vite": "^4.0.0" } } Did you followed the instructions here?: https://greensock.com/docs/v3/Installation#private For what I can see you have a private token generated so you could create a .npmrc file (never commit those to a public repo or post it's content here in the forums!) and install the packages there without adding anything to the tsconfig.json file. Finally is worth noticing that you don't need to specify the bonus package type in your imports, just do this and it should work: import gsap from "gsap"; import { MorphSVGPlugin } from "gsap/MorphSVGPlugin"; gsap.registerPlugin(MorphSVGPlugin); Hopefully this helps. Let us know if you have more questions. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
stectix Posted January 5, 2023 Author Share Posted January 5, 2023 Hello @Rodrigo, thanks for the reply! Happy to be a member Using Yarn 2 here so a slightly different setup but of course should be the same situation either or. Getting an error when I use the import: import gsap from "gsap"; I get error (this is worse than the original error as it cannot find anything at this point and Vite server will not start): 10:11:14 AM [vite] Internal server error: Failed to resolve import "gsap" from "src/components/MainMenu.tsx". Does the file exist? When I revert back to: import { gsap } from '@gsap/business'; This appears in my coding environment (Vite server will start however with this import): package.json file on my side is as so: "dependencies": { "@fullhuman/postcss-purgecss": "^5.0.0", "@gsap/business": "^3.11.4", "@heliofi/react": "^2.1.7", "@heroicons/react": "^2.0.13", "@react-spring/three": "^9.6.1", "@react-spring/types": "^9.6.1", "@react-three/drei": "^9.48.6", "@react-three/fiber": "^8.9.2", "@react-three/xr": "^5.1.2", "@solana/web3.js": "^1.73.0", "@tailwindcss/typography": "^0.5.8", "@types/three": "^0.147.1", "@use-gesture/react": "^10.2.23", "autoprefixer": "^10.4.13", "bs58": "^5.0.0", "daisyui": "^2.46.1", "immer": "^9.0.16", "postcss": "^8.4.20", "postcss-cli": "^10.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", "tailwindcss": "^3.2.4", "three": "^0.148.0", "zustand": "^4.2.0" }, "devDependencies": { "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "@vitejs/plugin-react-swc": "^3.0.0", "typescript": "^4.9.4", "vite": "^4.0.0" } .yarnrc file is at user home dir (correct location?), not project dir, with token data inserted: nodeLinker: node-modules yarnPath: .yarn/releases/yarn-3.2.1.cjs unsafeHttpWhitelist: - "npm.greensock.com" npmScopes: gsap: npmRegistryServer: "https://npm.greensock.com" npmAuthToken: "redacted" I get the feeling this is something simple being overlooked. What do you think? Link to comment Share on other sites More sharing options...
Rodrigo Posted January 5, 2023 Share Posted January 5, 2023 Hi, I'll try the same setup with Yarn in a bit, but I'm using version 1.22.19 though(I just don't use Yarn so I have no need to update it to a specific version). I'll let you know how it goes. Although not being an expert and neither an experienced Yarn user I can't promise any good result. I'm curious you mention Yarn 2 but seeing the latest snippet you posted it reads yarn 3.2.1. I'm also curious about this: 6 hours ago, stectix said: .yarnrc file is at user home dir (correct location?), not project dir, with token data inserted: Any particular reason to use a .yarnrc file and not an .nmprc file. I've used the bonus plugins in NextJS (different setup I recon) with Yarn and a .npmrc file in the project's root folder without any issues. Finally I'll ping @Prasanna in order to see if He can shed some light into this subject. Please stand by. Happy Tweening! Link to comment Share on other sites More sharing options...
stectix Posted January 6, 2023 Author Share Posted January 6, 2023 Hello @Rodrigo, Thanks for doing that, very much appreciated. And pardon me, Yarn 2 I use colloquially to describe anything not Yarn 1 as most documentation I come across makes this distinction in code base, including GreenSock .. I followed much of the direction in the above thread with just a few tweaks for my environment. In the meantime I will spawn a .npmrc file in the project dir to test the result. Perhaps this is part of the problem. Link to comment Share on other sites More sharing options...
stectix Posted January 6, 2023 Author Share Posted January 6, 2023 Ok put in an .npmrc file in both home dir and project dir and no change in behaviour. Also, I forgot from the previous post to show the coding env error from an import using gsap and not @gsap: Just to add a bit more context rooting out the issue. Link to comment Share on other sites More sharing options...
Prasanna Posted January 6, 2023 Share Posted January 6, 2023 Hi @stectix, @Rodrigo This seems to be a confusion caused by npm package aliasing. If you install the package using this command: `yarn add gsap@npm:@gsap/business` then the import should be `import gsap from 'gsap'`. This should work as the package manager creates a folder named `gsap` in the `node_modules` directory. If you did this, then add the following to compiler options: ``` "files": [ "node_modules/gsap/types/index.d.ts" ] ``` Let me know if this works 2 Link to comment Share on other sites More sharing options...
stectix Posted January 6, 2023 Author Share Posted January 6, 2023 Hello @Prasanna, Thank you... I will try this now and post results shortly. Link to comment Share on other sites More sharing options...
stectix Posted January 6, 2023 Author Share Posted January 6, 2023 @Prasanna, back again....previous package removed yarn.lock cleaned... Ran: yarn add gsap@npm:@gsap/business Getting this: ➤ YN0000: ┌ Resolution step ➤ YN0001: │ Error: gsap@npm:@gsap/business isn't supported by any available resolver at Bd.getResolverByDescriptor (/Users/--/.yarn/releases/yarn-3.2.1.cjs:396:1664) at Bd.bindDescriptor (/Users/--/.yarn/releases/yarn-3.2.1.cjs:396:1053) at ee (/Users/--/.yarn/releases/yarn-3.2.1.cjs:442:6954) ➤ YN0000: └ Completed ➤ YN0000: Failed with errors in 0s 31ms What do you think? Link to comment Share on other sites More sharing options...
stectix Posted January 6, 2023 Author Share Posted January 6, 2023 Hey all under a serious deadline and still cannot get gsap loaded into my env. A bit desperate for this to work now and Ive gone through just about everything I can think of. Friday night I know but a bit of emergency support would be a massive help here. Link to comment Share on other sites More sharing options...
Prasanna Posted January 6, 2023 Share Posted January 6, 2023 @stectixsorry about the late response, just saw the message. The error is weird - could be due to older version of yarn. If possible, please update the yarn version or use npm to install the package - it should fix it. If the above suggestion is not an option, I'd recommend doing this: 1. Run: `$yarn add @gsap/business` 2. import like this: `import gsap from '@gsap/business'` 3. import types like this: ``` "files": [ "node_modules/@gsap/business/types/index.d.ts" ] ``` Let me know if this helps. Otherwise I'd be happy to hop on a google meet call as well. 1 Link to comment Share on other sites More sharing options...
stectix Posted January 7, 2023 Author Share Posted January 7, 2023 Hey @Prasanna thanks for getting back to me. Tried the process again by the letter and still getting same errors. What I am going to do now is launch into a totally new, fresh env and see how that goes. Everything works except for GSAP in the current env, no idea why it is acting like so. A bit of added info.... Total env is: macOS>Homebrew>Node/Yarn>Vite+React+TS Homebrew uses stable versions so it is only slightly back on version for most recent Yarn (https://github.com/yarnpkg/berry/releases/tag/%40yarnpkg%2Fcli%2F3.3.1) : And instead uses: https://github.com/Homebrew/homebrew-core/blob/master/Formula/yarn.rb But IMO not so extreme to the point of making an error like this. Let me spin up a fresh env and I'll report back asap. 1 Link to comment Share on other sites More sharing options...
stectix Posted January 7, 2023 Author Share Posted January 7, 2023 Hello, So I'm now in a brand new env. Gsap was the first 'yarn add', no changes to anything (except import), default out of the box setup and: Entire tsconfig file: { "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ESNext"], "allowJs": false, "skipLibCheck": true, "esModuleInterop": false, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "ESNext", "moduleResolution": "Node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "files": ["./node_modules/@gsap/business/types/index.d.ts"], "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] } Its got to be something really trivial somewhere hiding. Edit- And to add, as mentioned before, gsap is the only package not behaving correctly. It would be one thing if I had more than one package malfunctioning but gsap is the only one. This should lead us to a solution somehow. Edit- I also tested a Vite+React+JS environment and gsap loads just fine with similar path structure. So its something to do with TS surely? Link to comment Share on other sites More sharing options...
Prasanna Posted January 8, 2023 Share Posted January 8, 2023 @stectix It seems like gsap package has been installed. Now, the typescript issue here is project-specific as there are various configurations involved. I'd recommend setting esModuleInterop as true, and maybe check the `node_modules` directory and test whether the type file exists? Link to comment Share on other sites More sharing options...
stectix Posted January 8, 2023 Author Share Posted January 8, 2023 Hi @Prasanna...thank you. Added esModuleInterop as true and directory is clean and correct: Error still remains. Don't know if you have access to or use a Mac to test on your side (if time allows). Im using Nova v10.6 (https://nova.app/) and you can DL a trial copy quickly. Maybe there is an odd chance of it being coding env related? Let me check this in another coding app. Link to comment Share on other sites More sharing options...
Prasanna Posted January 9, 2023 Share Posted January 9, 2023 @stectix - I was able to get the typescript app running without issues. Maybe this line is not needed in your typescript config? "files": ["./node_modules/@gsap/business/types/index.d.ts"], I created a github repo for reference: https://github.com/privjs/gsap-typescript-example 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now