React extensions boilerplate not working any more on the developer rig

I used the react boilerplate example a few weeks ago and it worked fine.

Now I load the same example from scratch and nothing seems to work, tried to remove the local storage from the rig browser, clear cache, uninstall and reinstall the rig, and still get the same error in the rig’s console that the extension helper library is not loaded:

coordinator.js:2 Extension Warning Extension Helper Library Not Loaded

The code is the same as the example which does have the line to load the extension library

thank you. It was working properly around a month ago

This indicates that either the helper is not in the header.

Or it 404’ed loading the path/URL/Built HTML output.

So you either have the paths setup wrong for this project or something else is awry. It’s a boilerplate/your setup issue and these are really hard to debug remotely

The example is the same as in the developer rig, it has helper in the head.

The extension-boilerplate folder is used as front end folder and It is run with yarn start, as per the instructions.

I did the same thing like a month ago and it woked…

You probably changed some settings and now the paths are wrong and you need to change them back and/or refresh the manifest and/or you need to recreate the viewers.

Toggle the developer tools and check the network tab for 404 errors, and/or the console for Javascript errors

No, I didn’t change anything, the manifest is as is, I am certain. I even tried several times.

I recreated the views, I’ve done this several times before when it worked, and created a new extension several times times now, I am doing it the same as before.

These are the first errors I get in the console

Stream init failed:

failed to resolve properties promise

api.twitch.tv/kraken/user:1 Failed to load resource: the server responded with a status of 401 ()


These are the network request that have no response and are in red:

https://api.twitch.tv/kraken/user

https://gql.twitch.tv/gql

https://api.twitch.tv/kraken/streams/myusername

https://api.twitch.tv/api/channels/myusername/access_token?need_https=true&oauth_token&platform=web&player_backend=mediaplayer&player_type=embed

https://client-event-reporter.twitch.tv/v1/stats

http://localhost:60415/supervisor.css

http://localhost:60415/supervisor.js

What would be the way to do yarn start from the folder directly (without the rig) and passing the auth parameters as variables? I think I read that somewhere, but I can’t remember

Edit: I tried again and now on the browser view, it doesn’t find the manifest

http://localhost:64245/manifest.json (404)

and

https://usher.ttvnw.net/api/channel/hls/myusername.m3u8?allow_source=true&baking_bread=true&baking_brownies=true&baking_brownies_timeout=1050&fast_bread=true&p=8673050&player_backend=mediaplayer&playlist_include_framerate=true&reassignments_supported=true&sig=9831bad91213cf95eecd41925ea5e7675173172a&token={"adblock"%3Atrue%2C"authorization"%3A{"forbidden"%3Afalse%2C"reason"%3A""}%2C"blackout_enabled"%3Afalse%2C"channel"%3A"myusername"%2C"channel_id"%3A441694764%2C"chansub"%3A{"restricted_bitrates"%3A[]%2C"view_until"%3A1924905600}%2C"ci_gb"%3Afalse%2C"geoblock_reason"%3A""%2C"device_id"%3A"b3805ff07dadefc3"%2C"expires"%3A1563821046%2C"game"%3A""%2C"hide_ads"%3Afalse%2C"https_required"%3Atrue%2C"mature"%3Afalse%2C"partner"%3Afalse%2C"platform"%3A"web"%2C"player_type"%3A"embed"%2C"private"%3A{"allowed_to_view"%3Atrue}%2C"privileged"%3Afalse%2C"server_ads"%3Atrue%2C"show_ads"%3Atrue%2C"subscriber"%3Afalse%2C"turbo"%3Afalse%2C"user_id"%3A441694764%2C"user_ip"%3A"185.245.86.164"%2C"version"%3A2}&supported_codecs=avc1&cdm=wv

(404)
(I don’t know what the hell this is)

and

https://localhost:8080/video_overlay.html?anchor=video_overlay&language=en&locale=en-US&mode=viewer&state=testing&platform=web&legacyComponentDesign=true

Most of those errors are irrlevant to your extneison inself

Try hitting logout top right and relogging on the dev rig

I tried but no, I then created a new twitch account and with the new account at least the circle changing color example worked (now after restarting it doesn’t work anymore either “EBS request returned Unauthorized (error)”), but this one it doesn’t

I will have to try testing on the console or something

Edit: Can it have something to do with the certificates?

Hello! Author of the boilerplate.

Can you tell me what version of the rig you’re using?

Hi. I am using the last one

I think disabling my vpn fixed it, but I just stopped using the rig and used the boilerplate directly, and it works without the rig.

Thank you for asking

Edit: and thank you for the boilerplate, it’s been really useful, I don’t think I could’ve done without it

Glad to hear that!

What version number is it reporting? You should be on 1.14 if memory serves.

If you are, can you go directly to the extension page and see if an error comes up?

My version is v1.2.1 I dowloaded recently

How would I do the auth when doing yarn start directly from the boilerplate folder?

Hi there ! Just jumping in to say I’m facing the same issue. Followed the onboaroding in the latest Rig; also did what was written in the README. But nothing shows up :frowning:

I encountered the same issue.
I replaced webpack.config.js with the one in boilerplate and it works.

Had same error, i use nextjs after adding new React.Context component, something goes wrong and twitch helper in pages/video_overlay stopped to loading.
Twitch helper was injected in head via next/head

import Head from "next/head";
...
<Head>
        <script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js" />
</Head>

Solution: move twitch helper script loading upper in hierarchy in my case i moved it to pages/_app.tsx, if u are using create-react-app or something like that just try to move it in App.jsx/tsx

1 Like

Hey @Ciberus i have built an extension using CRA and so far have locally tested it using a ngrok proxy but whenver i try uploading the build files to twitch for Hosted testing the extension doesn’t seem to load
(gives a Extension helper not loaded error) this is despite adding the cdn in index.html in the public folder and a Twitch.ext.onAuthorised in a js file that is used in the same index.html file can you help me out in this regard since i don’t really understand how to import the CDN into App.jsx

Hi, probably u can try to:

  • ensure that twtich helper script in “head” of html file and try again to load on a hosted test. It definitely should work, but probably u have problem in another place
  • as fallback with CRA u can try to use react-helmet(alternative of “next/head”)

    so it will look like this

if it wont help just contact me in discord Ciberus#4222 its easier to identify problem via call