Jump to content
Search Community

AndriyP

Members
  • Posts

    1
  • Joined

  • Last visited

Posts posted by AndriyP

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

×
×
  • Create New...