Being brand new to Twitch extensions and also learning React, I have created a project using the Extension boilerplate code. I have successfully created the extension and downloaded the code, I have it running on a local secure server and serving to the dev rig.
Problem is, the CSS is somehow getting stripped along the way. I make changes to App.css and save and the dev rig extension refreshes and the system expects and knows that App.css is there (it complains if I mess up syntax or remove the file), yet when I drill down in dev tools on the rig, there are no CSS properties attached to the DOM objects…
Any help would be much appreciated.
On another note, if i put my code into the unauthed part of the App.js, again, the DOM objects show on a regular browser, but there is no CSS being passed, so it’s something in the boilerplate that I’m missing and not the rig.
I can create a project using create-react that will serve to a normal page with all the css, but have not gotten it to load into the dev rig yet.
App.css fails to load (checking Network Tools)
As the path to it is wrong?
Likely a 404 error as it’s not where it’s supposed to be
Thanks for the quick reply!
It’s in the right place and expected by the server. If I remove it, the server complains “can’t resolve” - that it can’t be found, if I put it back, the server stops throwing the error.
The content is served, no errors in log, just CSS stripped.
No idea then.
Sounds like a standard web development problem and not a “rig” or extensions problem.
Something specific to your setup somewhere.
or a syntax error in your file, breaking the whole file.
Also Extensions are probably not the best thing to learn React with. As extensions have some abnormal development requirements. (Such as you can’t navigate anywhere which screws with Routers and Router handling)
I’m fine with that being the issue, I’m trying to narrow down why.
That I understand, I should be able to download the boilerplate, get it served and running (it has the auth and twitch includes itself) and start making changes, no?
I have noticed on reinstalling the rig and downloading a fresh boilerplate that it starts with the css stripped, the ‘App-light’ class gets assigned by the boilerplate, but there are no CSS properties attached, although the boilerplate specifies different text colors.
This is without me having touched any of the code.
I was unable to replicate this problem
The rig/inspector did take a little while to pick it up. But them this “test” has 8 different views in the project.
Appreciate you testing.
For the record- what mine looks like:
<head> so see if the
<style> is there.
This example seems to place the CSS inline (which is invalid when it comes to extensions but this only applies for hosted test/release where the CSP is actually applied)
There is no style call in the header…
How do I figure out what step it breaks at? App.js imports App.css meaning anything that App is passed to should also pull the stylesheet, no?
This is infuriating because all the functionality is, well, functioning. It’s just the styling that is broken without throwing any errors anywhere.
Something weird in the React stack somewhere.
And I don’t use React so I’m not sure, (too much bloat)
Really shouldn’t be using inline styles.
I assumed the inline styles were injected by the dev rig. They aren’t there when I run anything directly to the browser.
And yet they appeared for me.
The rig won’t block the
<style> appearing in the raw HTML.