Hosted Test not Working

Extension refuses to load
relevant information below

stdout

Extension Warning (CLIENT_ID): Extension Helper Library Not Loaded

HTML

<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
    <title>Panel</title>
</head>

<body>
    <div id="root"></div><noscript>You need to enable JavaScript to run this app.</noscript>
    <script defer src="Panel.bundle.js"></script>
</body>

</html>

Yes onAuthorized is the first thing I do.

You haven’t shown your code calling onAuthorized.

Seeing as you use a bundler I would assume you’re using React or a similar library, so make sure you actually are doing onAuthorized as the first thing and not loading React, then starting the mounting process, and then onAuthorized as that isn’t “the first thing”

Also with said bunlder entierly possible it tree shook it out since the callback might not have anything in it? But we can’t see what was generated

The bundle size needed to be reduced (below 1000KB)

The 1MB thing is not the root cause of the issues you were experiencing, and as Barry and myself tried to explain to you on Discord (I assume you’re the same person as it’s the exact same issue and claiming the same solution) the 1MB limit is just a guideline.

What would be an issue though is improper use of React and loading onAuthorized late in the process, which would be exacerbated by a large Extension filesize. Reducing the filesize will minimize issues with such Extension design but not solve them completely and for all users.

For future reference to anyone who stumbles on to this thread, please ensure you call onAuthorize with a callback to handle the event Twitch fires BEFORE loading reacting and mounting components.

For mobile. Not desktop

Even on Mobile, going above 1MB doesn’t result in an Extension Warning (CLIENT_ID): Extension Helper Library Not Loaded from my testing. It may fail review but as a guideline and not a technical limitation it shouldn’t error like that in hosted testing.

1 Like

For future reference to anyone who stumbles on to this thread, please note that I did call onAuthorize in the very first component to mount. It works like that

The issue with using onAuthorized within a component, such as in a useEffect, is that the client has to load the React library first, then start the mounting process, then the onAuthorized will be ran as useEffect takes place after mounting but prior to rendering (essentially componentDidMount in the component lifecycle).

What this means is that on slower systems, particularly mobile devices, it’s entirely possible for Twitch to fire the auth event before your component is mounted and your onAuthorized handler is run.

Just because it may appear to work for you does NOT mean that it will work for all users, and is bad React design, and just bad Extension design in general regardless of what libraries you are using to have onAuthorized run after other things are loaded and it is not recommended.

I’ll spin up some very stingy VMs and tell you what I discover.

Feel free, I’m just telling you what has been encountered by several Extension developers over the past few years, with thousands of Extension installs.