Injected overlay assets not found, 404 #875

zangab · 2025-04-26T12:59:56Z

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. 🙏

The text was updated successfully, but these errors were encountered:

zangab · 2025-04-28T07:58:49Z

What's also interesting is that the logo and the color-scheme are loaded correctly (so https://host:3000/vite-dev/__devtools__/logo.svg is found and returned correctly). The ./assets/ can't be found though. Another question I have is, where this ./assets/ prefix is coming from??

Other findings:

__VUE_DEVTOOLS_VITE_PLUGIN_CLIENT_URL__ // https://host:3000https://host:3000/vite-dev/__devtools__/
__VUE_DEVTOOLS_CLIENT_URL__ // https://host:3000/vite-dev/__devtools__/

FYI: we use a nginx proxy.

This style that is injected into the DOM (not in the iframe) is loaded correctly:

<link rel="stylesheet" href="https://host:3000/vite-dev/@id/virtual:vue-devtools-path:overlay/devtools-overlay.css">

kevinluo201 · 2025-05-01T20:24:21Z

I tried my local but didn't have your issue.

I didn't set publicOutputDir, can you share your vite_ruby configuration?
What's your vite_ruby version? Mine is 3.9.0
VueDevTools doesn't have enabled key, my vite-plugin-vue-devtools is 7.7.6

zangab · 2025-05-05T18:24:44Z

I am using the latest vite_ruby version or a fork due to a bugfix, see my PR. I'm also at 7.7.6 now. I saw a github issue about documentation and in there was this enabled key but I deleted it anyway.

My vite_ruby configuration looks like the following:

{
  "all": {
    "appType": "custom",
    "logLevel": "error",
    "additionalEntrypoints": []
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "logLevel": "info"
  }
}

But notice that the screenshot from here was focusing on the iframe the devtools are displayed in. The assets within the iframe are the issue.

kevinluo201 · 2025-05-07T02:55:39Z

I still cannot produce it 😅 Have you tried to run vite dev server like bin/vite dev --clean?

zangab · 2025-05-12T13:17:47Z

the bin/vite dev --clean does not help.
but could you answer my previous question? where does this assets prefix come from within /vite-dev/__devtools__/assets/index-HL7F1XxZ.js? where is this set?

UPDATE:
Ok, it seems this is the value of theVITE_RUBY_ASSETS_DIR env setting. However, how would my Vite server get this asset?
What I'm missing in your screenshot from your comment is the iframe the devtools are rendered in. How come your tools are inline?

zangab · 2025-05-13T05:47:50Z

So that we are on the same page:
In my node_modules I have the vite-plugin-vue-devtools folder. In there is a client folder that has an index.html file with the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="./logo.svg" type="image/svg+xml" />
    <title>Vue DevTools Client</title>
    <script src="./color-scheme.js"></script>
    <script type="module" crossorigin src="./assets/index-yAcFXzxs.js"></script>
    <link rel="stylesheet" crossorigin href="./assets/index-8iTKmI6V.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

This file is loaded within the iframe correct? There is no (!) assets folder in the vite-plugin though. So where do these two assets come from?!

kevinluo201 · 2025-05-14T01:32:05Z

I guess you're not using 7.7.6. I checked the released code on npm,
https://www.npmjs.com/package/vite-plugin-vue-devtools/v/7.7.6?activeTab=code
it loads ./assets/index-D82dXrLD.js and ./assets/index-CzVhFJJG.css

Plus, there's assets/ folder and it has both the files

The <iframe> also shows the same thing:

Maybe you can try:

rm -rf node_modules and do npm install again and see if it works
delete the packgerm -rf node_modules/vite-plugin-vue-devtools/ and download the code from by npm pack vite-plugin-vue-devtools install it manually npm install vite-plugin-vue-devtools-7.7.6.tgz. Restart both the Rails and Vite servers: bundle exec rails s and bin/vite dev

zangab · 2025-05-15T09:36:03Z

WTF ....
I did yarn add -D vite-plugin-vue-devtools. In the package.json I have "vite-plugin-vue-devtools": "^7.7.6". In the yarn.lock the entry looks like this:

vite-plugin-vue-devtools@^7.7.6:
  version "7.7.6"
  resolved "https://registry.yarnpkg.com/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.7.6.tgz#d76e61a2d53e88e72aada9d3f89529b3acfdb1ae"
  integrity sha512-L7nPVM5a7lgit/Z+36iwoqHOaP3wxqVi1UvaDJwGCfblS9Y6vNqf32ILlzJVH9c47aHu90BhDXeZc+rgzHRHcw==
  dependencies:
    "@vue/devtools-core" "^7.7.6"
    "@vue/devtools-kit" "^7.7.6"
    "@vue/devtools-shared" "^7.7.6"
    execa "^9.5.2"
    sirv "^3.0.1"
    vite-plugin-inspect "0.8.9"
    vite-plugin-vue-inspector "^5.3.1"

So I thought, everything should be fine. However, in the package.json of node_modules/vite-plugin-vue-devtools I got the following:

{
  "name": "vite-plugin-vue-devtools",
  "type": "module",
  "version": "7.7.2",
  "description": "A vite plugin for Vue DevTools"
}

Why is there version 7.7.2?
Additionally, the version 7.7.2 should also have an assets folder, but there isn't one in my node_modules.
I don't know what's going on here .... 😞

Even if I download the stuff and install it via yarn add -D devtools-7.7.6.tar.gz, I still have no assets folder (but at least version 7.7.6). I still run node v20, but I guess that's not the issue, as it says node > v14 in the engines.

UPDATE:
I installed the package in another project of mine, just to narrow down the issue, and in this project, it's installed correctly (version 7.7.6 & assets folder within client). One difference is the node version (v22 is used in the other project).
I updated my node to v22.15.1, the version is now 7.7.6 but the assets are still missing.

zangab · 2025-05-15T11:36:58Z

Ok, so I just added the package with the --verbose flag to see what's happening and I stumbled upon these lines here:

verbose 6.782398615 Copying "/usr/local/share/.cache/yarn/v6/npm-vite-plugin-vue-devtools-7.7.6-d76e61a2d53e88e72aada9d3f89529b3acfdb1ae-integrity/node_modules/vite-plugin-vue-devtools/client/assets/css-6ydISZ1j.js" to "/usr/src/app/node_modules/vite-plugin-vue-devtools/client/assets/css-6ydISZ1j.js".
verbose 6.782584282 Copying "/usr/local/share/.cache/yarn/v6/npm-vite-plugin-vue-devtools-7.7.6-d76e61a2d53e88e72aada9d3f89529b3acfdb1ae-integrity/node_modules/vite-plugin-vue-devtools/client/assets/diff-7a-uGD01.js" to "/usr/src/app/node_modules/vite-plugin-vue-devtools/client/assets/diff-7a-uGD01.js".
verbose 6.782863111 Copying "/usr/local/share/.cache/yarn/v6/npm-vite-plugin-vue-devtools-7.7.6-d76e61a2d53e88e72aada9d3f89529b3acfdb1ae-integrity/node_modules/vite-plugin-vue-devtools/client/assets/html-DQt1crSz.js" to "/usr/src/app/node_modules/vite-plugin-vue-devtools/client/assets/html-DQt1crSz.js".
verbose 6.782979168 Copying "/usr/local/share/.cache/yarn/v6/npm-vite-plugin-vue-devtools-7.7.6-d76e61a2d53e88e72aada9d3f89529b3acfdb1ae-integrity/node_modules/vite-plugin-vue-devtools/client/assets/index-CzVhFJJG.css" to "/usr/src/app/node_modules/vite-plugin-vue-devtools/client/assets/index-CzVhFJJG.css".
verbose 6.783199171 Copying "/usr/local/share/.cache/yarn/v6/npm-vite-plugin-vue-devtools-7.7.6-d76e61a2d53e88e72aada9d3f89529b3acfdb1ae-integrity/node_modules/vite-plugin-vue-devtools/client/assets/index-D82dXrLD.js" to "/usr/src/app/node_modules/vite-plugin-vue-devtools/client/assets/index-D82dXrLD.js".
...

So it's actually copying the files BUT they are not there .... 🤯 🤦 💢 😑
I also checked the tarball within my yarn cache and the assets folder exists. I just don't get it ....

zangab · 2025-05-15T12:51:08Z

OMG ......
someone added assets within the .yarnclean and that is the reason this folder is removed. Sheeeshhhh...
Thank you very much for your help though. 🙇

zangab closed this as completed May 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Injected overlay assets not found, 404 #875

Injected overlay assets not found, 404 #875

zangab commented Apr 26, 2025 •

edited

Loading

zangab commented Apr 28, 2025 •

edited

Loading

kevinluo201 commented May 1, 2025

zangab commented May 5, 2025 •

edited

Loading

kevinluo201 commented May 7, 2025 •

edited

Loading

zangab commented May 12, 2025 •

edited

Loading

zangab commented May 13, 2025 •

edited

Loading

kevinluo201 commented May 14, 2025 •

edited

Loading

zangab commented May 15, 2025 •

edited

Loading

zangab commented May 15, 2025 •

edited

Loading

zangab commented May 15, 2025

Injected overlay assets not found, 404 #875

Injected overlay assets not found, 404 #875

Comments

zangab commented Apr 26, 2025 • edited Loading

zangab commented Apr 28, 2025 • edited Loading

kevinluo201 commented May 1, 2025

zangab commented May 5, 2025 • edited Loading

kevinluo201 commented May 7, 2025 • edited Loading

zangab commented May 12, 2025 • edited Loading

zangab commented May 13, 2025 • edited Loading

kevinluo201 commented May 14, 2025 • edited Loading

zangab commented May 15, 2025 • edited Loading

zangab commented May 15, 2025 • edited Loading

zangab commented May 15, 2025

zangab commented Apr 26, 2025 •

edited

Loading

zangab commented Apr 28, 2025 •

edited

Loading

zangab commented May 5, 2025 •

edited

Loading

kevinluo201 commented May 7, 2025 •

edited

Loading

zangab commented May 12, 2025 •

edited

Loading

zangab commented May 13, 2025 •

edited

Loading

kevinluo201 commented May 14, 2025 •

edited

Loading

zangab commented May 15, 2025 •

edited

Loading

zangab commented May 15, 2025 •

edited

Loading