webpack CSSPlugin Webpack error - Uncaught Cannot tween a null target

[Yashi-2]

2 minutes ago, GreenSock said:

 

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. 

 

yes for development i want to use hot module replacement, but there is a feature call writetodisk. it will allow us to output css into a file. i just tested it, it also doesn't work. i mean file is outputting correctly but error is still there.  actually i'm thinking about how to give you guys a codepen demo. i don't know how webpack import will handle in codepen

[Yashi-2]

this is the expected behavior. but it doesn't work when i work with webpack and imports

 

See the Pen BvbGMG by yashi (@yashi) on CodePen

 

[GreenSock]

33 minutes ago, Yashi-2 said:

this is the expected behavior. but it doesn't work when i work with webpack and imports

 

Yeah, that doesn't really help at all. We need to see the non-working version.  

 

Maybe try stackblitz.com? Or Codesandbox.io? 

[Yashi-2]

29 minutes ago, GreenSock said:

 

Yeah, that doesn't really help at all. We need to see the non-working version.  

 

Maybe try stackblitz.com? Or Codesandbox.io? 

 

OK, i found the issue. check this out. its bundled using parcel.js it does the same thing like webpack. i think the issue is in hot-module replacement, when we start dev or production mode. webpack write link-href tag into the file head area (invisible) but in this current situation link-href not presence in html file. production build also not presence the link-href until you build, but when i include css file directly in header area there is no issue at all.

 

to check the issue. just comment out the html link-href.

 

https://codesandbox.io/s/9l9xvz806p

[Jonathan]

Hi again
 

The best way to get this solved faster is to create a limited reduced codepen demo using the CSSRulePlugin setup CSS, JS, and HTML. Then once you see it run correctly in codepen you will know that the issue is with your local react setup. Plus we can actually see some code with an animation to test live.

 

But without seeing your code in a live editable environment we wont be able to see whats going on to help you better.

 

 

You should also check out StackOverflow for CSS pseudo-elements and React:

 

https://stackoverflow.com/questions/28269669/css-pseudo-elements-in-react/28269950

 

Thanks!