Hi,
I’m currently developing an extension for a game show that I plan to run with some friends next week. My extension appears to be working for local testing, but as soon as I switch over to hosted testing, I see the following errors in the console and the extension never loads:
GET https://<clientid>.ext-twitch.tv/<clientid>/0.0.1/90e952298986496115d466692e2643f1/viewer.html?anchor=component&language=en&locale=en-US&mode=viewer&state=hosted_test&platform=web 404 (Not Found)
Extension Warning (<clientid>): Extension Helper Library Not Loaded
(https://assets.twitch.tv/assets/vendor-b5584ba28144f38a77a0.js)
I’m not sure for the reason behind the first one; viewer.html is my viewer component path (as shown below) and is defined in my Router
// viewer.html root
createRoot(document.getElementById("root")!).render(
<SocketProvider>
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
<Router>
<Routes>
<Route path="/" element={<ViewerLeaderboard />} />
<Route path="/viewer.html" element={<ViewerLeaderboard />} />
<Route path="/question" element={<ViewerQuestion />} />
<Route path="/answered" element={<ViewerAnswered />} />
<Route path="/answer" element={<ViewerAnswer />} />
</Routes>
</Router>
</SocketProvider>
);
I’m also not sure why the second error is occurring; my built html files all seem to include the extension helper in the head and also seem to have relative paths:
<!-- Build viewer.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>McCutcheon Mayhem</title>
<!-- The below script creates player accounts when they connect to the extension -->
<!-- Commented for testing -->
<script type="module" crossorigin src="./viewer.js"></script>
<link rel="modulepreload" crossorigin href="./client.js">
<link rel="modulepreload" crossorigin href="./index.js">
<link rel="stylesheet" crossorigin href="./client.css">
</head>
<body>
<div id="root"></div>
<!-- Used for local testing; uncomment to load the corresponding file that you want to load -->
</body>
</html>
I saw people mention calls to onAuthorized being necessary as the first thing in order for the extension to load properly, so I imported a basic script seen below with the hook and delayed my react components in my html entry points, but that didn’t seem to fix the issue either.
window.Twitch.ext.onAuthorized(function () {
console.log("onAuthorized");
return;
});
I don’t know what exactly the culprit is, but any help is appreciated! I’d really like to get this extension hosted so we can use it for dress rehearsal (and hopefully for the actual show)!