How to upload a ReactJS to the Twitch Extension dashboard

Extensions
1

Hi, all!

I’m needing help to find the right way to upload a bundled React app as a zipped filed to the Twitch Extensions dashboard. After running npm run build and getting the minified files, I compressed the collection of files (not the parent folder that holds all the files). A small note to make is that, yes, there are folders (the generated js, css and media folders) but the index.html file is at the root level. Not sure if that is an issue — if it is, perhaps it’s worth noting in the documentation.

Uploading that to the dashboard will display an empty extension similar to this case but in my case there is actually some dimensions to the box, such that it’s an empty white box.

Looking at the console, I see this error:

Refused to apply style from 'https://[my-base-uri].ext-twitch.tv/static/css/main.64c5b6d4.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Could it be because the CSS file is not at the same level but nested?

Other things I’ve tried:

  • I have tried to test using the offered extension boilerplate, but that seems to be in a broken state right now.
  • I used the Developer Rig’s “Run Frontend” feature with the same files and it displays properly there.

Any help is much appreciated :slight_smile:

2

The issue is that you’re using absolute links to the files, such as /static/css/main.64c5b6d4.css, which results in it trying to load from a path that doesn’t exist, as the files are actually located at https://[Extension Client ID].ext-twitch.tv/[Extension Client ID]/[Version]/[Some Hash]/...

Having assets within folders is fine as long as they are referenced correctly, you need to change your absolute links to relative links, eg /static/css/main.64c5b6d4.css should become static/css/main.64c5b6d4.css or ./static/css/main.64c5b6d4.css

This isn’t an issue in the developer rig as everything is loaded from the root path, but on Twitch it’s served from a path, and not the root, so absolute links can’t work.

1 Like
3

@Dist Thank you so much for the detailed response! That was the issue indeed.

For others that might run into this, I corrected the paths to be relative by adding this at the top of my package.json file:

{
  "name": "my-app",
  "version": "0.1.0",
  "homepage": "./", // This here!
  "dependencies": ...