GSAP + TypeScript + Webpack

[navix09]

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]

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]

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

 

 

[navix09]

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]

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.