My Demo Extension Not appearing in hosted testing on my channel

Hi,

I want to be twitch extension developer. I have built (my first) a demo extension to understand the flow. I have used to Developer Rig to quickly built and test my extension on local environment i.e., https://localhost.rig.twitch.tv:3000/. My extension is working fine on local environment as you can see in this screenshot. ( https://www.screencast.com/t/WTUcR080Sm )

But when I try to test in hosted environment (by uploading assets) on twitch on my channel.
My Demo Extension Not appearing in hosted testing on my channel (see this screenshot
https://www.screencast.com/t/aZxHkiAR )

[Note: Iā€™m not getting any 404 error like mentioned in other posts. I have deployed my extension as panel. In console I can see my all js and css files are showing 200 ok. That means my extension is loading. I can also see my extension header, probably created by twitch, showing my extension name. But thats it, it is not showing my extension view.]

Need some help here, as what Iā€™m missing?

Are you getting and errors in console or any other fails to load?

Yes
See screenshot
https://www.screencast.com/t/WsqQQHOP8

But Iā€™m getting same errors even if I deactivate my extension. Doesnā€™t seems to be related to my extension i guess.

In the developer tools if you look at the Network tab, are all of your files/scripts/images/etc loading? I remember I had a problem once where when I zipped everything it added a directory so when I uploaded it to Twitch all my paths were off.

Are you using any framework such as ReactJS?
I noticed that it is not finding the generated files of the build, maybe thatā€™s it, if you can post the compilation script and the webpack it is easier to help you, if it is not then the problem is simpler to solve.

Hi

[Stream_Genie], yes all my resources are loading.

[AlbericoD], Yes for Frontend Iā€™m using React JS. But Iā€™m deploying compiled files by using yarn build.

Today, I tried one more thing. Till now when I said local I meant initiating developer rig using local/dummy settings to develop extension, which any developer can use before moving to on-boarding process.
[FYI: My on-boarding process is complete.]

Today (thinking that I might have done some mistake) I started developer rig project from scratch. And tried to use live extension settings on my local system.
Note: nothing changed from my side. I just simply downloaded developer rig and try to run it using live extension secret and other details. But I started getting Invalid JWT errors. Looks like Iā€™m missing something important.
Also my OAuth redirect URI is pointing to http://localhost, Is it fine.
When I do hosted testing then to what it (OAuth redirect URI ) should point too?

So when I was implementing reactjs in the twitch extension I had this same problem with hosted test, normally this is a problem with dynamic routes, there are a few ways to solve this, one of them is to use HashRouterā€™s react-router-dom, the BrowserRouter does not work correctly when embedded in the twitch, there is some discussion in the forum about it.

All problems with assets, uploads, routes and webpack (this is very important, its extension is usually refused if you do not change some configurations of the webpack) of the reactjs:

1 Like

Hi,

In my Test Hello World extension (which is nothing but replica of https://github.com/twitchdev/extensions-hello-world), what will be the value of ā€œOAuth Redirect URIā€ in Setting -> Client Configuration?, currently it is ā€œhttps://localhost:8080/ā€ in local test mode.

Also what will be its value in Hosted mode?

Not of much help as currently Iā€™m not using any routes, its a simple react app with one screen for now. Also in my zip there is no folder. I have placed all my files at same place as index.html

Thanks for the info because I do have plans to use routes in react app once Iā€™m through with this blocker.

Hi @AlbericoD,

Today I have moved on a little bit, so solved JWT error issue. But stuck on other thing.
So when my extension is loaded (in online mode, testing on localhost) in developer rig, my extension view is not loading. When I look at network tab I see this,
POST https://api.twitch.tv/v5/extensions/my_extn_client_id/auth/refresh/999999999
is giving 404.

Can you help me with this?

Hey @AlbericoD,

I also found ā€œextension-frameā€ iframe style property is set to ā€œdisplay:none;ā€. If I remove that I can see my extension view in online test mode.
I further investigate and found that Line 183 of ā€œ./developer-rig/public/coordinator.jsā€ is setting iframe display style property to none.

I believe this must be intentionally. Need your help here to understand why my iframe display style property is set to none in live mode. Whereas it is fine in local test.

So if you look at the coordinator file at line 183, the

https://github.com/twitchdev/developer-rig/blob/master/public/coordinator.js

iframe.style.display = ā€˜noneā€™ property;
the iframe object already comes with the style property initialized in none

If you analyze the code ( at line 202-211), the condition for this not being true is when:

     else if (data.action === 'extension-frame-authorize') {
     iframe.style.removeProperty('display');
 }

So there are some possible solutions

  • developer rig is in some conflict, or there are updates that you have not picked up in the master branch (git pull)

  • you are letting some incorrect configuration pass

  • README developer rig:

Troubleshooting

The Extension I have specified is not appearing the Developer Rig.

There are a number of things that can create problems. The most common causes are: invalid NPM or NodeJS installations; a missing host file entry for the Developer Rig; misconfigured Environment variables being passed to the Developer Rig; or Extension configuration that does not match the contents of the Twitch Developer Site.

I am certain that my Developer Rig Configuration is correct, but my Extension is still not working.

Clear your browser cache and local storage, restart the Developer Rig, and cross your fingers. To delete its local storage, use your browserā€™s developer tools to do so then refresh your browser. Ensure youā€™ve included the Twitch Extension Helper in your front-end files.

If you have tried everything and still can not resolve it, and you think the problem is in developer rig, there is a way to report your problem here:
https://github.com/twitchdev/developer-rig/issues

Without seeing code and configuration it is difficult to understand what is happening, we hope you can complete your project without major problems, any problem can come back here that everyone will help you.

Hi @AlbericoD,

Thanks for help. Finally got it solved and able to deploy my first extension on my channel. :slight_smile:

Donā€™t know what was the cause of problem. But I solved it by taking following steps:-

  1. Taking git pull of Developer Rig Repo.
  2. Clearing my browser cache including cookies and local storage. And re-login to twitch.
  3. Running Rig app again as I was doing previously for online mode.

Though I still see my console full of errors esp., this one

Failed to load https://client-event-reporter.twitch.tv/v1/stats: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost.rig.twitch.tv:3000' is therefore not allowed access.

This error comes even when no extension is loaded in my developer rig.

One more thing, Iā€™m still not able to figure out the purpose of ā€œOAuth Redirect URIā€ in Settings - Client Configuration in my extension on dev.twitch.tv .

1 Like