GSAP not recognized in rollup bundle

[AndriyP]

Hi, 

I am trying to bundle my React app as a npm package, to import it in another react app. It was working fine, but then I had to use gsap in my project and now the build of my app is not working anymore.
I use rollup to bundle my app and I get the following error :

[!] (plugin rpt2) RollupError: src/components/Background/Background.tsx:7:22 - error TS2307: Cannot find module 'gsap' or its corresponding type declarations.

7 import { gsap } from "gsap";
                       ~~~~~~
src/components/Background/Background.tsx:9:31 - error TS2307: Cannot find module 'gsap/ScrollTrigger' or its corresponding type declarations.

9 import { ScrollTrigger } from "gsap/ScrollTrigger";
                                ~~~~~~~~~~~~~~~~~~~~

Here is my rollup config :
 

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import image from "@rollup/plugin-image";
import json from "@rollup/plugin-json";
import url from "rollup-plugin-url";
import { terser } from "rollup-plugin-terser";
import generatePackageJson from "rollup-plugin-generate-package-json";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import replace from "@rollup/plugin-replace";

const config = [
  {
    input: "src/indexLib.tsx",
    output: [
      {
        file: "dist/index.js",
        format: "umd",
        sourcemap: true,
        name: "myapp",
      },
    ],
    plugins: [
      replace({
        "process.env.REACT_APP_BUILD_TARGET": JSON.stringify("npm"),
      }),
      peerDepsExternal(),
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      postcss(),
      terser(),
      image(),
      json(),
      url({
        include: ["**/*.woff", "**/*.woff2", "**/*.mp4"],
        limit: Infinity,
      }),
      generatePackageJson({
        baseContents: (pkg) => ({
          name: pkg.name,
          main: "index.js",
          dependencies: {},
          version: `${pkg.version}${
            process.env.REACT_APP_ENV !== "PROD"
              ? // @ts-ignore
                `-beta.${pkg.betaVersion}`
              : ""
          }`,
          author: pkg.author,
          license: pkg.license,
        }),
      }),
    ],
    external: ["react", "react-dom", "styled-components"],
  },
];

export default config;

Here is my tsconfig :
 

{
  "compilerOptions": {
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "sourceMap": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "noFallthroughCasesInSwitch": true,
    "outDir": "dist/",
    "isolatedModules": true,
    "noEmit": true,
    "typeRoots": [
      "./node_modules/@types",
      "./src/types"
    ]
  },
  "exclude": [
    "dist",
    "node_modules",
    "test-package-app",
    "build"
  ],
  "include": [
    "src"
  ]
}

Any help would be appreciated, I scrolled all the internet but found nothing, it seems that the problem comes from the rollup-plugin-typescript2 plugin, but it raises this error only with gsap module, everything else is working fine.

[Cassie]

Mmmm. I'm not really clued up with rollup. Build tools are my kryptonite.

It might be because you're trying to import the wrong version of the file? Not sure if your project is expecting ES modules or not? You could try loading the UMD/CommonJS version instead?
 

import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

Is GSAP working in your project at all? What do you get if you log out console.log(ScrollTrigger) - is it just the rollup bit that's causing issues?

[GreenSock]

Yeah, we're not really experts with all the various bundlers but I'm pretty sure this isn't a GSAP problem. We do include TypeScript definition files in the GSAP package. I'd maybe try Cassie's suggestion just to see if that helps at all. Most likely it's some kind of configuration issue with your bundler(?) I really wish we had a silver bullet to offer you. Plenty of people are using GSAP with Rollup and all kinds of other bundlers successfully. I wonder if there's a Rollup community of experts you could ask? 🤷‍♂️

[Francesco Hayes]

If anyone else runs into this issue, the solution is to use the plugin @rollup/plugin-node-resolve, which allows you to use any packages from your node_modules directory.