How can i create a Extension using Vite Framework?

Extensions
1

assets get error on load.
HTML file

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <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>Vite + Vue + TS</title>
    <script type="module" crossorigin src="/assets/index-DPhlYy-U.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-BgePaNhz.css" />
  </head>
  <body>
    <div id="app"></div>
    <script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
  </body>
</html>

external files are in assets folder

2

You’re using absolute links to your assets, so as you can see by the error you’re getting it’s trying to access them at the root of the domain, https://CLIENTID.ext-twitch.tv, but Twitch doesn’t serve your files from the root, it serves it from a path that looks like https://CLIENTID.ext-twitch.tv/CLIENTID/VERSION/HASH/.

So you need to refer to the documentation for your build process and fix its config so that it builds with relative links, such as ./some-file.js, or some-file.js, not /some-file.js.

1 Like
3

Wow, it’s works perfectly, i use ‘./’, thank you so much!!!

4

do you know how can i change this build config on my vite config, to put ‘./’ on assets?

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})
5

I’m not a Vite user myself, but I believe the way you would change it is by using the base option, https://vitejs.dev/config/shared-options.html#base, as it defaults to / so setting it to an empty string, '', should work.

1 Like
6

Thank you again!!