Problem with CSSRulePlugin + Webpack

[joejordanbrown]

When using CSSRulePlugin with Webpack you get the following console error "Uncaught TypeError: Cannot read property 'getRule' of undefined".

I've created two examples 1 working using codepen which doesn't use webpack and then 1 using webpackbin which uses webpack.

none webpack: 

See the Pen BZLoBg by joejordanbrown (@joejordanbrown) on CodePen.

webpack:: 
https://www.webpackbin.com/bins/-KmZTQAtz9cZMRMzY4mN

 

 

 

 

 

[GreenSock]

Your import statements should look like this: 

import { TweenMax } from "gsap";
import CSSRulePlugin from "gsap/CSSRulePlugin";

 

The reason your CSSRulePlugin one wasn't working before was because "gsap" has its "main" point to TweenMax which does NOT include CSSRulePlugin.

 

Does that help?

[joejordanbrown]

Sorry, that was a mistake when copying from TypeScript.

Thank you Jack, I think you meant.

import { TweenMax } from "gsap";
import CSSRulePlugin from "gsap/CSSRulePlugin";

I had to change it slightly for it to work in TypeScript I've created example below for other people to use as a reference in future.

JavaScript + Webpack:
https://www.webpackbin.com/bins/-KmZTQAtz9cZMRMzY4mN

TypeScript + Webpack:
https://www.webpackbin.com/bins/-KmZW-TYfUdNkkcDmwkw

[OSUblake]

Hi @joejordanbrown

 

This is the correct way to import a default export with TypeScript.

import * as CSSRulePlugin from "gsap/CSSRulePlugin";

// OR
import CSSRulePlugin = require("gsap/CSSRulePlugin");

 

This post explains why.