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
}
}
