Jump to content
Search Community

Problem with CSSRulePlugin + Webpack

joejordanbrown test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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







Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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:

TypeScript + Webpack:

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...