Asset Not Found

Extensions
1

Hello, I made an extension in VueJS with Vuetify 3, I did a local test anyway, which worked perfectly, but when I do the hosted test it gives error 404 “Asset Not Found”, I’ve tried several things, but nothing works, the zip I sent has this structure.

This is the error on the console.

And here is the response when loading the extension.

  • Video - Component Viewer Path: video_component
  • Configuration Path and Live Configuration Path: config

main.js:

// Components
import App from './App.vue'

// Composables
import { createApp } from 'vue'

// Plugins
import { registerPlugins } from '@/plugins'
const app = createApp(App)
registerPlugins(app)
app.mount('#app')

/router/index.js:

// Composables
import { createRouter, createWebHistory } from 'vue-router'
import Index from '@/views/Index.vue';

const routes = [
  {
    path: '/:pathMatch(.*)*',
    component: Index
  },
  {
    path: '/video_component',
    component: Index
  },
  {
    path: '/config',
    component: Index
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

export default router

Here is the project structure.

2

Extensions are uploaded to a sub folder on the extension sub domain

Initially your code in the HTML file appears to have loaded correctly but is trying to load assets from the absolute URL instead of relative to the HTML

I wrote about the structure here Twitch Extensions: Part 3 – The Architecture of an Extension – Barry Carlyon

Broadly speaking your code is all in https://client-ID.ext-twitch.tv/some/path/ but you are trying to load https://client-ID.ext-twitch.tv/someasset instead of https://client-ID.ext-twitch.tv/some/path/someasset

Additionally you didn’t declare a HTML file to load, so it didn’t load one.

You are try to use default routing but the server doesn’t support default routing it’s a dumb NGINX server with no autoindex/404 routing defined.

You have to specify a HTML file to load in the developer console, which you didn’t and as such it didn’t iniatlise your router and then route.

You told it to load https://86awg8waf7965fa57j7uw7b1pl9jr8.ext-twitch.tv/86awg8waf7965fa57j7uw7b1pl9jr8/0.0.1/ce13113316b6728414b5b015684c6a4b/video_component but you have no file called video_component but you do have a index.html

So your developer console configuration does not match the configuration that is in production.