Jump to content
Search Community

CSSPlugin Webpack error - Uncaught Cannot tween a null target

Yashi-2 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

Hi , i just include tweenmax, cssplugin and cssruleplugin into my webpack config file and i followed the documentation problem is when i create a tween using cssRule its gives me "Uncaught Cannot tween a null target" 

 

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

var menuLine = CSSRulePlugin.getRule(".header__outer:after");

TweenMax.to(menuLine, 1, {cssRule:{color:'#FFF'}});

 

Link to comment
Share on other sites

Hi,

 

I don't know if this is completely related to webpack. The error comes from the css rule returning null.

 

Unfortunately the information you're providing is not enough to get a complete idea of what you're trying to do and your setup.

 

If you're working with React, or VueJS this thread could help you:

 

Here is a live sample:

 

https://stackblitz.com/edit/gsap-react-pseudo-element-tween

 

Beyond that is not much I can do to help you.

 

Happy tweening!!

 

  • Like 2
Link to comment
Share on other sites

20 minutes ago, Rodrigo said:

Hi,

 

I don't know if this is completely related to webpack. The error comes from the css rule returning null.

 

Unfortunately the information you're providing is not enough to get a complete idea of what you're trying to do and your setup.

 

If you're working with React, or VueJS this thread could help you:

 

Here is a live sample:

 

https://stackblitz.com/edit/gsap-react-pseudo-element-tween

 

Beyond that is not much I can do to help you.

 

Happy tweening!!

 

 

this seems fine to me, i did exactly the same. i dont know how to solve this. or do i have to load css-loader. because i use scss-loader only

Link to comment
Share on other sites

Hi @Yashi-2 and Welcome to the GreenSock Forum!

 

Make sure that your the CSS rule used in your getRule() method is the exact same CSS rule used in your CSS stylesheet.

 

So since you have the following getRule() :

 

getRule(".header__outer:after")

 

your CSS stylesheet should also have the following:

 

.header__outer:after {  
  
}

 

Happy Tweeening! :)

  • Like 2
Link to comment
Share on other sites

4 minutes ago, Jonathan said:

Hi @Yashi-2 and Welcome to the GreenSock Forum!

 

Make sure that your the CSS rule used in your getRule() method is the exact same CSS rule used in your CSS stylesheet.

 

So since you have the following getRule() :

 


getRule(".header__outer:after")

 

your CSS stylesheet should also have the following:

 


.header__outer:after {  
  
}

 

Happy Tweeening! :)

 

Yes its exactly the same. i tried 2 different ways. one with SCSS nesting and one with normal CSS Rule, i know they both are same. but i though its because SCSS nesting

 

Normal CSS

 

.header__outer{
	@include xy-grid;
    @include flex-align(center);
    @include position(relative);
    z-index: 999;
}
.header__outer:after{
    content:'';
    height:3px;
    width: 0%;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(90deg,#7068e0 -2%,rgba(240,96,24,1) 20%,rgba(240,164,24,1) 33%,#00dcff 46%);
}

 

 

SCSS 

 

.header__outer {
        @include xy-grid;
        @include flex-align(center);
        @include position(relative);

        z-index: 999;
        &:after{
            content:'';
            height:3px;
            width: 0%;
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            background-image: linear-gradient(90deg,#7068e0 -2%,rgba(240,96,24,1) 20%,rgba(240,164,24,1) 33%,#00dcff 46%);

        }
}

 

 

Still no luck :(

 

Link to comment
Share on other sites

Sorry to hear about the trouble. Is there any way you could provide a reduced test case in codepen or something so that we can see what's going on? We'd love to help, but it's tough to troubleshoot blind. 

 

I doubt this is the main issue, but I was wondering if maybe tree shaking was getting rid of CSSPlugin in your bundler or something. If so, simply reference CSSPlugin somewhere in your code as we describe in the docs: https://greensock.com/docs/NPMUsage

 

I also wonder if it'd help at all to use two colons, like .header__outer::after. I doubt it, but it's worth a shot. :)

  • Like 2
Link to comment
Share on other sites

Just to piggy back on what Jack (@GreenSock) wrote.

 

Have you tried running your GSAP code only after the DOM is ready/loaded (html document) and the window is loaded (all external assets are loaded). This will make sure you only run your code when the DOM is ready and the window is fully loaded. I never messed with REACT so i dont know how react loads or if it waits for DOM and window to be loaded before running your custom JS.

 

For example this will make sure that the window and DOM are fully loaded even if the document or window fire before or after one another:

 

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
  // wait until all external assets are loaded (media assets, images, css, js, fonts, etc)
  window.addEventListener("load", function (event) {
    
    // add custom GSAP code here
    
  }, false);  
  
});

 

:)

  • Like 1
Link to comment
Share on other sites

20 minutes ago, GreenSock said:

Sorry to hear about the trouble. Is there any way you could provide a reduced test case in codepen or something so that we can see what's going on? We'd love to help, but it's tough to troubleshoot blind. 

 

I doubt this is the main issue, but I was wondering if maybe tree shaking was getting rid of CSSPlugin in your bundler or something. If so, simply reference CSSPlugin somewhere in your code as we describe in the docs: https://greensock.com/docs/NPMUsage

 

I also wonder if it'd help at all to use two colons, like .header__outer::after. I doubt it, but it's worth a shot. :)

 

i tried TreeShaking. but its still not working.

 

import { TimelineMax, CSSPlugin, CSSRulePlugin } from "gsap/all";
const plugins = [TimelineMax, CSSPlugin, CSSRulePlugin];

 var menuLine = CSSRulePlugin.getRule('.header__outer:after');
            TweenMax.to(menuLine, 1, {cssRule:{width:'100%'}});

 

Link to comment
Share on other sites

14 minutes ago, Jonathan said:

Just to piggy back on what Jack (@GreenSock) wrote.

 

Have you tried running your GSAP code only after the DOM is ready/loaded (html document) and the window is loaded (all external assets are loaded). This will make sure you only run your code when the DOM is ready and the window is fully loaded. I never messed with REACT so i dont know how react loads or if it waits for DOM and window to be loaded before running your custom JS.

 

For example this will make sure that the window and DOM are fully loaded even if the document or window fire before or after one another:

 


// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {
  
  // wait until all external assets are loaded (media assets, images, css, js, fonts, etc)
  window.addEventListener("load", function (event) {
    
    // add custom GSAP code here
    
  }, false);  
  
});

 

:)

 

 

tried this. it gives me this error

 

import { TimelineMax, CSSPlugin, CSSRulePlugin } from "gsap/all";
const plugins = [TimelineMax, CSSPlugin, CSSRulePlugin];

document.addEventListener("DOMContentLoaded", function(event) {
  
        // wait until all external assets are loaded (media assets, images, css, js, fonts, etc)
        window.addEventListener("load", function (event) {
          
            var menuLine = CSSRulePlugin.getRule('.header__outer:after');
            TweenMax.to(menuLine, 1, {cssRule:{width:'100%'}});
          
        }, false);  
        
      });

 

Quote

DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at Function.CSSRulePlugin.getRule (http://localhost:3000/bundle.js:4455:19)
    at http://localhost:3000/bundle.js:43072:83

 

Link to comment
Share on other sites

I'm sure we could help if we can see your actual project or a codepen demo (even better). It's just so hard to troubleshoot blind like this. I really want to help, but my hands are tied. That error almost sounds like CSSRulePlugin wasn't loaded (which is odd because you're referencing it directly in that "plugins" const). 

  • Like 2
Link to comment
Share on other sites

2 minutes ago, Jonathan said:

Thanks for posting your output error.

  • What is the version of GSAP you are using in that bundle.js?
  • Also what OS and OS version are you testing this on?

:)

 

1 - Window 10 with Latest Update

2 - Just downloaded through git repo (yarn add gsap)

 

Link to comment
Share on other sites

11 minutes ago, GreenSock said:

I'm sure we could help if we can see your actual project or a codepen demo (even better). It's just so hard to troubleshoot blind like this. I really want to help, but my hands are tied. That error almost sounds like CSSRulePlugin wasn't loaded (which is odd because you're referencing it directly in that "plugins" const). 

 

i can,  but that is the only thing in my js file. nothing else.  its just a import and calling it. i don't know is this okay to give you a codepen demo.  but i can attach my webpack.config.js, index.js and package.json file, or if anything else you need to solve this i can provide. :(

 

Link to comment
Share on other sites

Hi,

 

Unfortunately nothing of this is getting us closer to solve this. You haven't informed us what type of app this is, React, Vue, Meteor, jQuery, etc? That could be critical in order to narrow it down, so please let us know about that part.

 

Also it would be nice to know two things. First, right after creating the css rule variable could you add the following code:

 

var menuLine = CSSRulePlugin.getRule(".header__outer:after");
// add this 
console.log( document.querySelector(".header__outer") );

 

This in order to know if the element is actually in the DOM at that point (which is related to @Jonathan's post regarding the fact of what is going on with the DOM when the code is executed).

 

Second, you mentioned that you're using webpack with SASS loader. What is exactly your webpack config just regarding that (we do not need to see your entire webpack.config.js file right now, just the part of getting the SASS files and turning them to CSS. I assume that you're using the SASS loader first and then the CSS loader. In the same regard, is your CSS actually being bundled and visible on the project (again and sorry for being so persistent about it, what type of project we're talking about here).

 

Happy Tweening!! 

  • Like 1
Link to comment
Share on other sites

3 minutes ago, Rodrigo said:

Hi,

 

Unfortunately nothing of this is getting us closer to solve this. You haven't informed us what type of app this is, React, Vue, Meteor, jQuery, etc? That could be critical in order to narrow it down, so please let us know about that part.

 

Also it would be nice to know two things. First, right after creating the css rule variable could you add the following code:

 


var menuLine = CSSRulePlugin.getRule(".header__outer:after");
// add this 
console.log( document.querySelector(".header__outer") );

 

This in order to know if the element is actually in the DOM at that point (which is related to @Jonathan's post regarding the fact of what is going on with the DOM when the code is executed).

 

Second, you mentioned that you're using webpack with SASS loader. What is exactly your webpack config just regarding that (we do not need to see your entire webpack.config.js file right now, just the part of getting the SASS files and turning them to CSS. I assume that you're using the SASS loader first and then the CSS loader. In the same regard, is your CSS actually being bundled and visible on the project (again and sorry for being so persistent about it, what type of project we're talking about here).

 

Happy Tweening!! 

 

so sorry my bad. its a jQuery project. with webpack. actually its not an app. it a website  . please find the attach files

 

postcss.config.js

package.json

webpack.dev.js

webpack.prod.js

Link to comment
Share on other sites

webpack.dev.js - scss rule

 

rules: [{
                test: /\.(scss|css)$/,
                exclude: /node_modules/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options: {
                            // minimize: true,
                            modules: false,
                            importLoaders: 1
                        }
                    },

                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            ident: 'postcss'
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true,
                            includePaths: [
                                path.resolve(__dirname, 'node_modules/compass-mixins/lib/'),
                                path.resolve(__dirname, 'node_modules/foundation-sites/scss/'),
                                path.resolve(__dirname, 'node_modules/bootstrap/scss/'),
                                path.resolve(__dirname, 'node_modules/bourbon/core/'),
                            ]
                        }
                    }
                ]
            },

 

 

with css-loader

Link to comment
Share on other sites

I assume that the bundling process doesn't return any errors and that the styles are being applied to the DOM.

 

This happens both in development and production?

 

In your webpack dev file I found this commented out:

 

// new MiniCssExtractPlugin({
//     filename: '[name].css',
//     // chunkFilename: '[id].[contenthash].css',
// }),

 

So I assume that in development the CSS is being added to a <style> tag in the header section, right?.

 

Honestly at this point I'm a bit lost and running out of ideas, because this error: Cannot access rules, basically means that the rules plugin can't find the rule you're passing to it. I think we'll need some live sample to check.

 

Finally just in case, have you tried to rename the actual css class to something without any underscores?.

  • Like 1
Link to comment
Share on other sites

10 minutes ago, Yashi-2 said:

 

for development server its all apply to style tag, production build, css files export separately

 

Aha! That may be the key. I wonder if either the external CSS files haven't fully loaded at that time yet or perhaps they don't contain the style you think they contain. Again, I really wish you could provide an actual reduced test case that we could see for ourselves. I'm not sure we can do much else without that. I'd bet that if you put the styles directly in the page it'd work, though I know that may not be ideal in your scenario. 

  • Like 2
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...