Path problems on Hosted Test

t.katze · December 8, 2017, 7:16pm

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

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

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

So it’s basically missing the middle part.

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

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

t.katze · December 15, 2017, 9:29am

Anyone? Please, could not fix it yet.

BoldBigflank · April 16, 2018, 12:44am

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.

BoldBigflank · May 11, 2018, 1:13pm

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

BarryCarlyon · May 11, 2018, 2:43pm

Did you try this solution

solnoid · October 12, 2020, 9:44pm

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"

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!

Dist · October 12, 2020, 9:56pm

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.

solnoid · October 12, 2020, 10:54pm

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:

solnoid · October 12, 2020, 11:06pm

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:

solnoid · October 13, 2020, 12:45am

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'
}