Failed to load resource:400 ()

Hello all,

I am confused why I am getting load resource 400 on hosted test. I bundled only the files inside the build folder of my app here is screen shot.

Project is react project with material ui. I ran npm run build and zipped only the contents.
The env variables should only be for backend right?

I added my username to streamer and test allowlist.
the compressed bundle size is 874.73 KB

Any ideas appreciated.
thank you

Open up the browser dev tools and debug your website.

Extensions are just websites so normal website debugging applies.

You declared a 400 but you didn’t state what was 400ing

I suspect your CSS/JS is whats 400-ing as you used an aboluste link/reference to the JS/CSS in your HTML instead of a relative one as extensions upload to a sub folder.

Or you didn’t state the html to load was index.html in the dev console.

1 Like

that sounds right thank you comment I will try it.

much appreciated.

The issue is you’re using absolute paths to files, as Barry previously suggested may be the issue.

Twitch stores Extension files on https://EXTENSIONID.ext-twitch.tv/EXTENSIONID/VERSION/HASH/, but because of the absolute reference it’s attempting to load from the root path https://EXTENSIONID.ext-twitch.tv/.

You will need to use relative paths, ie change /static/css/main.af0a5b9d.css to static/css/main.af0a5b9d.css or ./static/css/main.af0a5b9d.css. This will need to be done for all references to other files, and can usually be handled by configuring your build process accordingly.

2 Likes

Thank you both very much. It solved the problem. Very much appreciated thank you.

Also @BarryCarlyon i enjoy your blog (:

1 Like