Injected overlay assets not found, 404 #875
Description
I use VueJS with the Vite Ruby.
I followed the instructions on the docs section "How to work with Vite Ruby?".
Part of my vite.config.js looks like this:
export default defineConfig(({ mode }) => {
const isDevelopment = mode === "development";
return {
build: { sourcemap: isDevelopment },
plugins: [
vue(),
vueDevTools({
enabled: isDevelopment,
appendTo: "app/frontend/entrypoints/bundle.js",
componentInspector: {
reduceMotion: true,
},
}),
RubyPlugin(),
},
server: {
hmr: {
host: "localhost",
protocol: "ws",
},
allowedHosts: true,
},
};
});The DevTool Icon is rendering but the injected JS and stylesheet (for the tabs within the overlay) are running into a 404. Actually, the referenced JS has a MIME-Type error because the JS is not found so it returns the HTML infopage of the Vite-Dev server -> js expected, html served -> error.
But WHY is this happening? How can I get rid of it?
The vite-dev path is set as my publicOutputDir within Vite-Ruby config.
Path for CSS: https://host:3000/vite-dev/__devtools__/assets/index-CzVhFJJG.css
Path for JS: https://host:3000/vite-dev/__devtools__/assets/index-HL7F1XxZ.js
The files are not served by the Vite-Devserver, so where are they?
The inspector seems to work and recognizes the components correctly. However, the Overlay is not.
I use
"vue": "^3.5.13",
"vite": "^6.3.0",
"vite-plugin-ruby": "^5.0.0",
"vite-plugin-vue-devtools": "^7.7.5",
Setting the base config option to ./ or similar did not work!
Pls help me out. Thx. 🙏