# Hosted Test not Working

**URL:** <https://discuss.dev.twitch.com/t/hosted-test-not-working/38467>\
**Category:** Extensions\
**Created:** [May 16, 2022, 5:00am UTC](https://discuss.dev.twitch.com/t/hosted-test-not-working/38467 "2022-05-16T05:00:41Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![cyaaron.tai.nava](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/cyaaron.tai.nava/32/31041_2.png) [@cyaaron.tai.nava](https://discuss.dev.twitch.com/u/cyaaron.tai.nava)\
**Post date:** [May 16, 2022, 5:00am UTC](https://discuss.dev.twitch.com/t/hosted-test-not-working/38467/1 "2022-05-16T05:00:41Z")

</div>

Extension refuses to load  
relevant information below

stdout

```auto
Extension Warning (CLIENT_ID): Extension Helper Library Not Loaded

```

HTML

```auto
<!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.

---

<div class="post-metadata">

**Author:** ![Dist](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/dist/32/7192_2.png) [@Dist](https://discuss.dev.twitch.com/u/Dist)\
**Post date:** [May 16, 2022, 10:55am UTC](https://discuss.dev.twitch.com/t/hosted-test-not-working/38467/2 "2022-05-16T10:55:45Z")

</div>

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”

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [May 16, 2022, 11:11am UTC](https://discuss.dev.twitch.com/t/hosted-test-not-working/38467/3 "2022-05-16T11:11:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cyaaron.tai.nava](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/cyaaron.tai.nava/32/31041_2.png) [@cyaaron.tai.nava](https://discuss.dev.twitch.com/u/cyaaron.tai.nava)\
**Post date:** [May 17, 2022, 7:26pm UTC](https://discuss.dev.twitch.com/t/hosted-test-not-working/38467/4 "2022-05-17T19:26:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dist](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/dist/32/7192_2.png) [@Dist](https://discuss.dev.twitch.com/u/Dist)\
**Post date:** [May 17, 2022, 7:37pm UTC](https://discuss.dev.twitch.com/t/hosted-test-not-working/38467/5 "2022-05-17T19:37:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [May 17, 2022, 7:37pm UTC](https://discuss.dev.twitch.com/t/hosted-test-not-working/38467/6 "2022-05-17T19:37:46Z")

</div>

> [@Dist](#):
>
> 1MB limit is just a guideline.

 ![image](https://d2opxh93rbxzdn.cloudfront.net/original/3X/f/9/f9b77fe5ead76b9ef75d689b25d9929bfd48266e.png)

For mobile. Not desktop

---

<div class="post-metadata">

**Author:** ![Dist](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/dist/32/7192_2.png) [@Dist](https://discuss.dev.twitch.com/u/Dist)\
**Post date:** [May 17, 2022, 7:52pm UTC](https://discuss.dev.twitch.com/t/hosted-test-not-working/38467/7 "2022-05-17T19:52:13Z")

</div>

> [@BarryCarlyon](#):
>
> 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.

---

<div class="post-metadata">

**Author:** ![cyaaron.tai.nava](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/cyaaron.tai.nava/32/31041_2.png) [@cyaaron.tai.nava](https://discuss.dev.twitch.com/u/cyaaron.tai.nava)\
**Post date:** [May 22, 2022, 6:31pm UTC](https://discuss.dev.twitch.com/t/hosted-test-not-working/38467/8 "2022-05-22T18:31:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dist](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/dist/32/7192_2.png) [@Dist](https://discuss.dev.twitch.com/u/Dist)\
**Post date:** [May 22, 2022, 7:01pm UTC](https://discuss.dev.twitch.com/t/hosted-test-not-working/38467/9 "2022-05-22T19:01:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![cyaaron.tai.nava](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/cyaaron.tai.nava/32/31041_2.png) [@cyaaron.tai.nava](https://discuss.dev.twitch.com/u/cyaaron.tai.nava)\
**Post date:** [May 22, 2022, 7:07pm UTC](https://discuss.dev.twitch.com/t/hosted-test-not-working/38467/10 "2022-05-22T19:07:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dist](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/dist/32/7192_2.png) [@Dist](https://discuss.dev.twitch.com/u/Dist)\
**Post date:** [May 22, 2022, 7:30pm UTC](https://discuss.dev.twitch.com/t/hosted-test-not-working/38467/11 "2022-05-22T19:30:17Z")

</div>

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.