Jump to content
Search Community

TypeScript Error - '....node_modules/@gsap/business/types/index.d.ts' is not a module

stectix test
Moderator Tag

Recommended Posts

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

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!

  • Like 1
Link to comment
Share on other sites

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):

 

image.png.dd1ede9d460257b56b57cd59cb1343cd.png

 

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

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

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

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:

 

 image.png.95507f4117eaadf9b36718062d570c2d.png

 

Just to add a bit more context rooting out the issue.

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

@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

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

@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.

 

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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:

 

image.png.626a94d1e8c87e7ec302d020f8676a88.png

 

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

Hi @Prasanna...thank you.

 

Added  esModuleInterop  as true and directory is clean and correct:

 

image.thumb.png.ad8f428290c1642d6827c88706eed1b8.png

 

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...