Server-side-rendered markup does not pass HTML validation (scoped style tag required) about nuka-carousel HOT 10 CLOSED

As an alternative, it'd be great to have a way to suppress the style tag injection entirely and instead import the css into a webpack bundle.

from nuka-carousel.

As an alternative, it'd be great to have a way to suppress the style tag injection entirely and instead import the css into a webpack bundle.

Yes. Because, as I found out recently, scoped styles aren't supported in most browsers.

from nuka-carousel.

@sompylasar @BuffaloBuffalo Did either of you find a workaround for this? It's the only thing that's messing up my server-side rendering :(

from nuka-carousel.

@otajor There is no viable workaround for this, only change the library code. But the issue is with the HTML validation by the W3C Validator. How is it messing up the server-side rendering? Could you elaborate please? Maybe it's a different issue you're talking about.

from nuka-carousel.

@sompylasar I was getting the following error on my server-rendered pages (only the ones with carousels on):
uncaught Error: Unable to find element with ID 173

I googled and found this SO answer which said it was caused by invalid HTML structure. So when I saw this thread I figured it was the cause of my bug.

Seems I was right as I seem to have fixed the problem by adding a hacky .replace(/<style/g, '<style scoped') to my rendered html on the server before serving it. I'll see if I can come up with something less dangerous though!

from nuka-carousel.

@otajor Interesting... Just checked. I don't get this error while still having <style type="text/css" data-reactid="507">.slider-slide > img {width: 100%; display: block;}</style> rendered by the server-side.

from nuka-carousel.

@otajor Which browser are you observing the error in?

from nuka-carousel.

@sompylasar Chrome 58 - nothing fancy! And nuka-carousel 2.0.4.

from nuka-carousel.

@otajor I'm sticking with 1.2.0 but I don't see any clear difference in this part.

from nuka-carousel.

@otajor Maybe it's React? I use 15.5.4.

from nuka-carousel.