navix09 Posted January 31, 2020 Posted January 31, 2020 Hey, I'm trying to use GSAP with TS and bundle everything with webpack. However the TypeScript compiler fails to correctly recognize the modules. I get the following message TS2305: Module '"gsap"' has no exported member 'gsap'. Thrown from my (only) index TS file: import { gsap } from 'gsap'; import { CSSRulePlugin } from 'gsap/CSSRulePlugin'; import './style.scss'; gsap.registerPlugin(CSSRulePlugin); let rule = CSSRulePlugin.getRule('.brand-name:after'); gsap.to('.brand-name', 3, { backgroundPosition: 0 }); gsap.to(rule, 2, { width: "100%" }); I have read several forum posts about this topic and - as far as I know - I don't need to install neither @types/greensock nor @types/gsap as type definitions are integrated as of now. VSCode also tells me the following message: Cannot find module 'gsap/CSSRulePlugin'.ts(2307) This is my webpack config: const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.ts', devtool: 'inline-source-map', mode: 'development', module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }, { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }, { test: /\.s[ac]ss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] }, ] }, resolve: { extensions: [ '.tsx', '.ts', '.js' ] }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, plugins: [ new MiniCssExtractPlugin(), new HtmlWebpackPlugin({ template: './src/index-template.html', minify: { collapseWhitespace: true, removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, useShortDoctype: true }, }), ] }; And my tsconfig: { "compilerOptions": { "outDir": "./dist/", "noImplicitAny": true, "module": "es6", "target": "es5", "allowJs": true } }
ZachSaucier Posted January 31, 2020 Posted January 31, 2020 Hey navix and welcome to the GreenSock forums. You can see the officials type definition files yourself in our GitHub repo. Notice that the CSSRules definition file is called css-rule-plugin.d.ts. It seems that's something is wrong with your configuration. I'm not experienced with build tools, maybe @OSUblake can chime in. Side note: We recommend that you include the duration inside of the vars parameter so that it can work with defaults and is more standard.
OSUblake Posted January 31, 2020 Posted January 31, 2020 It sounds like something is wrong some of your config files because it says it cannot find CSSRulePlugin.ts. It should not be looking for files with a .ts extension as gsap modules have a .js extension. Another side note. Using the CSSRulePlugin is kind of an outdated technique as you can just use CSS variables. See the Pen PowWgOz by GreenSock (@GreenSock) on CodePen. 1
navix09 Posted January 31, 2020 Author Posted January 31, 2020 56 minutes ago, OSUblake said: It sounds like something is wrong some of your config files because it says it cannot find CSSRulePlugin.ts. It should not be looking for files with a .ts extension as gsap modules have a .js extension. Another side note. Using the CSSRulePlugin is kind of an outdated technique as you can just use CSS variables. Can't figure it out. How would typescript get the type definitions and the js files? It basically finds nothing inside of the gsap module.
OSUblake Posted January 31, 2020 Posted January 31, 2020 If it can find the js files, then it should be able to find the definitions automatically. You can manually tell it where the definitions are in your tsconfig. { "compilerOptions": { ... }, "files": [ "node_modules/gsap/types/index.d.ts" ] } But I think there is still something wrong with some of your config files because it shouldn't be looking for a CSSRulePlugin.ts file. Rather, it should be looking for CSSRulePlugin.js. The only thing I can think of at the moment is that your moduleResolution isn't correct... or that you don't have gsap installed. 1
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