agilgur5
commented
1 year ago So your interpretation of the error is correct here that rpt2's TS LanguageServer seems to have been unable to find the types. Either that or it couldn't find the package itself (if it was installed in a non-NPM way? but rpt2 supports PNPM etc symlinks as of #332 / 0.32.0).
Why this only happens with gsap is perplexing though. I checked gsap's package.json configuration and it seems to reference its types correctly 🤔 So I'm not really sure what's going on here.
rpt2 does not override TS's default resolution, so that this behavior differs between tsc and rpt2 is very strange.
You didn't fill out the "Troubleshooting" section of the issue template, but a minimal reproduction would be helpful here to get a better idea of what might be causing this.
Troubleshooting
What happens and why it is incorrect
Hi, I am trying to bundle my React app as a library, 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:
I tried to add the
@types/gsapmodule even if the developer of the library are saying that it is not necessary since the latest versions, but it changed nothing.Environment
My app is used in different environments, that's why you can see two build script in my
package.json. It is used in a website by importing the statics files, and it is used in a next app by importing the app as a module. The web app build is working fine, but I have a problem with the library build since I added the module gsap (before that it was creating the bundle fine).Versions
```js 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; ```
:rollup.config.js
```json5 { "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", "build"], "include": ["src"] } ```
:tsconfig.json
```json { "name": "myapp", "version": "1.0.0", "betaVersion": "1", "license": "UNLICENSED", "private": true, "main": "src/index.js", "type": "module", "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "@types/lodash": "^4.14.177", "@types/ndjson": "^2.0.1", "@types/react": "^18.0.25", "@types/react-dom": "^18.0.8", "@types/react-router-dom": "^5.3.2", "@types/zepto": "^1.0.32", "@typescript-eslint/typescript-estree": "^5.42.1", "axios": "^0.24.0", "gsap": "^3.11.3", "html-react-parser": "^1.4.2", "i18next": "^21.5.3", "i18next-browser-languagedetector": "^6.1.2", "lodash": "^4.17.21", "moment": "^2.29.1", "ndjson": "^2.0.0", "ndjson-cli": "^0.3.1", "node-ssh": "^12.0.2", "po2json": "^0.4.5", "postcss": "^8.4.18", "react": "^18.2.0", "react-dom": "^18.2.0", "react-i18next": "^11.14.3", "react-router-dom": "^5.2.0", "react-share": "^4.4.0", "sass": "^1.56.0", "typed-scss-modules": "^4.1.1", "typescript": "^4.5.2", "web-vitals": "^1.0.1", "zepto": "^1.2.0" }, "scripts": { "start": "REACT_APP_BUILD_TARGET=web react-scripts start --watch ", "buildLib": "rollup -c", "build": "REACT_APP_BUILD_TARGET=web react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "generate:types": "typed-scss-modules src --watch", "pootle:process": "yarn run run i18n --verbose " }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@rollup/plugin-commonjs": "^23.0.2", "@rollup/plugin-image": "^3.0.1", "@rollup/plugin-json": "^5.0.1", "@rollup/plugin-node-resolve": "^15.0.1", "@rollup/plugin-replace": "^5.0.1", "react-scripts": "4.0.3", "rollup": "^3.2.5", "rollup-plugin-generate-package-json": "^3.2.0", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-terser": "^7.0.2", "rollup-plugin-typescript2": "^0.34.1", "rollup-plugin-url": "^3.0.1", "runjs": "^4.4.2" }, "peerDependencies": { "react": ">=16.0.0" } } ```
:package.json
```text [!] (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"; ~~~~~~~~~~~~~~~~~~~~ src/indexLib.tsx at error (/myappPath/node_modules/rollup/dist/shared/rollup.js:206:30) at Object.error (/myappPath/node_modules/rollup/dist/shared/rollup.js:23499:20) at RollupContext.error (/myappPath/node_modules/rollup-plugin-typescript2/src/context.ts:35:17) at /myappPath/node_modules/rollup-plugin-typescript2/src/diagnostics.ts:70:17 at Array.forEach (plugin output with verbosity 3
: