# Path problems on Hosted Test

**URL:** <https://discuss.dev.twitch.com/t/path-problems-on-hosted-test/13231>\
**Category:** Extensions\
**Created:** [December 8, 2017, 7:16pm UTC](https://discuss.dev.twitch.com/t/path-problems-on-hosted-test/13231 "2017-12-08T19:16:09Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![t.katze](https://avatars.discourse-cdn.com/v4/letter/t/fbc32d/32.png) [@t.katze](https://discuss.dev.twitch.com/u/t.katze)\
**Post date:** [December 8, 2017, 7:16pm UTC](https://discuss.dev.twitch.com/t/path-problems-on-hosted-test/13231/1 "2017-12-08T19:16:09Z")

</div>

Hey guys,  
my extension (Angular) runs fine on local. When I upload it to Twitch, I have 2 really strange path problems:

1. My viewer.html is called correctly, like this: [https://86eeokt1plvz236jvdsql3jhqyb7je.ext-twitch.tv/86eeokt1plvz236jvdsql3jhqyb7je/0.0.1/db22b6958315cf2061888eed4e40325d/viewer.html?anchor=video\_overlay&language=de&mode=viewer&state=hosted\_test](https://86eeokt1plvz236jvdsql3jhqyb7je.ext-twitch.tv/86eeokt1plvz236jvdsql3jhqyb7je/0.0.1/db22b6958315cf2061888eed4e40325d/viewer.html?anchor=video_overlay&language=de&mode=viewer&state=hosted_test)

but then internally my js scripts can not be loaded.  
They are referenced like this in viewer.html:

It tries to load the script from:  
[https://86eeokt1plvz236jvdsql3jhqyb7je.ext-twitch.tv/styles.6d30e43468e33eddcf86.bundle.css](https://86eeokt1plvz236jvdsql3jhqyb7je.ext-twitch.tv/styles.6d30e43468e33eddcf86.bundle.css)

So it’s basically missing the middle part.

1. For my assets I got a different problem:  
They are called like this:  
[https://86eeokt1plvz236jvdsql3jhqyb7je.ext-twitch.tv/86eeokt1plvz236jvdsql3jhqyb7je/0.0.1/assets/img/bob\_logo.png](https://86eeokt1plvz236jvdsql3jhqyb7je.ext-twitch.tv/86eeokt1plvz236jvdsql3jhqyb7je/0.0.1/assets/img/bob_logo.png)

which returns:  
404 Not Found

Code: NoSuchKey  
Message: The specified key does not exist.  
Key: 86eeokt1plvz236jvdsql3jhqyb7je/0.0.1/assets/img/bob\_logo.png  
RequestId: DEDF8120AB08EB4E  
HostId: B1G+tNdKTwlG4ewK8mMxjRVq3QYW8tC/PnfgvjlN4wUu2jxz5CRqTHpn1bAb6HaJPYS6WCpsk08=

already found the posts refering to this problem, but could not fix it yet.

Internally I reference my assets like this:  
\<img src="…/assets/img/…\>

Hope you can help me. Ty  
Tobi

---

<div class="post-metadata">

**Author:** ![t.katze](https://avatars.discourse-cdn.com/v4/letter/t/fbc32d/32.png) [@t.katze](https://discuss.dev.twitch.com/u/t.katze)\
**Post date:** [December 15, 2017, 9:29am UTC](https://discuss.dev.twitch.com/t/path-problems-on-hosted-test/13231/2 "2017-12-15T09:29:04Z")

</div>

Anyone? Please, could not fix it yet.

---

<div class="post-metadata">

**Author:** ![BoldBigflank](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/boldbigflank/32/4095_2.png) [@BoldBigflank](https://discuss.dev.twitch.com/u/BoldBigflank)\
**Post date:** [April 16, 2018, 12:44am UTC](https://discuss.dev.twitch.com/t/path-problems-on-hosted-test/13231/3 "2018-04-16T00:44:36Z")

</div>

I’m seeing the same issue, with Vue and/or Preact. The files need a publicPath set but I don’t have a way of knowing where the cdn is going to put them beforehand.

---

<div class="post-metadata">

**Author:** ![BoldBigflank](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/boldbigflank/32/4095_2.png) [@BoldBigflank](https://discuss.dev.twitch.com/u/BoldBigflank)\
**Post date:** [May 11, 2018, 1:13pm UTC](https://discuss.dev.twitch.com/t/path-problems-on-hosted-test/13231/4 "2018-05-11T13:13:00Z")

</div>

Still hoping for some insight on this, I’m dead in the water until this is fixed.

---

<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 11, 2018, 2:43pm UTC](https://discuss.dev.twitch.com/t/path-problems-on-hosted-test/13231/5 "2018-05-11T14:43:18Z")

</div>

Did you try this solution

> [@\[SOLVED\] Vue.js is not working on Hosted Test](https://discuss.dev.twitch.com/t/solved-vue-js-is-not-working-on-hosted-test/11945):
>
> I am now trying to develop Twitch Extension using Vue.js. My Twitch Extension, developed as Vue.js in the Local Test state, seems to work fine for me. However, after switching to the Hosted Test state, Vue.js on my Twitch Extension will delete the root element itself and stop running. I can not understand this result. Is it impossible to use Vue.js as a Twitch Extension? Or, is there another way to configure Vue.js for use with Twitch Extension? You can download the test project from the …

---

<div class="post-metadata">

**Author:** ![solnoid](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/solnoid/32/10450_2.png) [@solnoid](https://discuss.dev.twitch.com/u/solnoid)\
**Post date:** [October 12, 2020, 9:44pm UTC](https://discuss.dev.twitch.com/t/path-problems-on-hosted-test/13231/6 "2020-10-12T21:44:48Z")

</div>

Hey,

I have the exact same issue (Angular) local is great. Using ng build --prod, but with optimization set to false to skip minification. That goes in a “public/” folder which contains an index.html, many bundles js files, and one css file, as well as an assets folder. I zip everything while inside the folder…

The first problem is indeed that index.html, which loads correctly, has relative links that use the base url without the full path, which includes the version and md5 hash. In other words index html correctly uses the full path:  
`"https://48a6l522li5kdnyiwwfcleeu86aehj.ext-twitch.tv/48a6l522li5kdnyiwwfcleeu86aehj/0.0.1/cacca402562a2507cce0809192c10a0b/index.html..."`

However the files relatively referenced in index.html access an incomplete path:  
`"https://48a6l522li5kdnyiwwfcleeu86aehj.ext-twitch.tv/polyfills-es2015.1f07717b803649b0cda9.js"`

 ![console](https://d2opxh93rbxzdn.cloudfront.net/original/2X/2/25b1a397b3682cc7e0edf2b942141cc77ac8112a.png)

Naturally I checked to see if my files were in the correct path locations, and they were. I was able to test, in a broken way, if change the base href would help. Setting the base href to:  
`"https://48a6l522li5kdnyiwwfcleeu86aehj.ext-twitch.tv/48a6l522li5kdnyiwwfcleeu86aehj/0.0.1/cacca402562a2507cce0809192c10a0b/"`

solves all my problems… until I upload my zip and the md5 changes again. Which is good but bad for me getting this to work. I want to know if anyone figured out a solution here. Putting \* anywhere, like in the forum post above did not get me anywhere.

I was thinking of dynamically changing the base href but I can’t have inline scripts, and I can’t access the scripts I create lol…

Also this feels like it should not be an issue unless 1) Angular/webpack is not allowed or 2) My setup of is off in some not obvious way, that I’m hoping some with fresh eyes can help me with!

Thank you!

---

<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:** [October 12, 2020, 9:56pm UTC](https://discuss.dev.twitch.com/t/path-problems-on-hosted-test/13231/7 "2020-10-12T21:56:58Z")

</div>

> [@solnoid](#):
>
> However the files relatively referenced in index.html access an incomplete path:  
> `"https://48a6l522li5kdnyiwwfcleeu86aehj.ext-twitch.tv/polyfills-es2015.1f07717b803649b0cda9.js"`

This indicates they are not relative links.

Check the HTML and ensure they are relative links, eg `./polyfills-es2015.1f07717b803649b0cda9.js` or `polyfills-es2015.1f07717b803649b0cda9.js`.

If the link in the HTML is `/polyfills-es2015.1f07717b803649b0cda9.js` then that’s not a relative link and as the extension isn’t hosted in the root directory it’ll fail.

---

<div class="post-metadata">

**Author:** ![solnoid](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/solnoid/32/10450_2.png) [@solnoid](https://discuss.dev.twitch.com/u/solnoid)\
**Post date:** [October 12, 2020, 10:54pm UTC](https://discuss.dev.twitch.com/t/path-problems-on-hosted-test/13231/8 "2020-10-12T22:54:00Z")

</div>

Thanks for the quick reply!

I really hope that is the case. Below I have examples of the scripts at the bottom of index.html and the css import that I have tried:

```
<script src="runtime-es2015.fc2cbfc53e9c6df9db7f.js" type="module"></script>
<script src="runtime-es5.fc2cbfc53e9c6df9db7f.js" nomodule defer></script>
<link rel="stylesheet" href="styles.6ea73ef1f99a6147ccef.css">
<script src="./runtime-es2015.fc2cbfc53e9c6df9db7f.js" type="module"></script>
<script src="./runtime-es5.fc2cbfc53e9c6df9db7f.js" nomodule defer></script>
<link rel="stylesheet" href="./styles.6ea73ef1f99a6147ccef.css">

```

As I mentioned before I also tried, which shouldn’t work due to the incorrect hash but it did get rid of the error. Maybe it takes some time to remove the old version/hash. But I digress, I’ll attach index.html below if that helps.

`<script src="48a6l522li5kdnyiwwfcleeu86aehj/0.0.1/cacca402562a2507cce0809192c10a0b/runtime-es2015.fc2cbfc53e9c6df9db7f.js" type="module"></script>`

index.html currently being used:

 ![indexHtml](https://d2opxh93rbxzdn.cloudfront.net/original/2X/9/9dafe2edaec7b8e9a5c93f0bc6e013037334f54c.jpeg)

---

<div class="post-metadata">

**Author:** ![solnoid](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/solnoid/32/10450_2.png) [@solnoid](https://discuss.dev.twitch.com/u/solnoid)\
**Post date:** [October 12, 2020, 11:06pm UTC](https://discuss.dev.twitch.com/t/path-problems-on-hosted-test/13231/9 "2020-10-12T23:06:48Z")

</div>

_Gaaaaaasssp_

I changed `<base href="/" />` to `<base href="" />` because you are correct that absolute pathing had to be happening somewhere and that was the only likely culprit!

Now I’ve got all these other path issue but those feel more reasonable… for some reason lol.

Thank you!

Other errors if you are curious:

 ![newErrors](https://d2opxh93rbxzdn.cloudfront.net/original/2X/4/483b90eac6d358d04d9b0d2ad14687d2942412d4.jpeg)

---

<div class="post-metadata">

**Author:** ![solnoid](https://d3ovvz0v2ajtpu.cloudfront.net/user_avatar/discuss.dev.twitch.com/solnoid/32/10450_2.png) [@solnoid](https://discuss.dev.twitch.com/u/solnoid)\
**Post date:** [October 13, 2020, 12:45am UTC](https://discuss.dev.twitch.com/t/path-problems-on-hosted-test/13231/10 "2020-10-13T00:45:56Z")

</div>

Got it all working!

For future reference I change my base href to:

`<base href="./" />`

That resolved all (above) but one error, which had to do with the angular router.

Changed my pathMatch, in my router.module files that contained children, from ‘full’ to ‘prefix’.

```
{
    path: '',
    redirectTo: '...',
    pathMatch: 'prefix'
}
```