Issue with loading regular script from /public

Build tool

Vite

Where do you see the problem?

[X] In the browser
[ ] In the terminal

Describe the bug

I need to load an external UMD script for a devtool's panel. Ideally, a blocking one because it creates a global variable that I need to use in the app.

My intuition was to just put it in the /public directory and reference it from panel.html. While this has worked (mostly?):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script src="../public/elk-0.7.1.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/panel.tsx"></script>
  </body>
</html>

I got warnings from Vite (?) that I should reference files from /public using the root and that I should use /elk-0.7.1.js. So I've followed the advice:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script src="/elk-0.7.1.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/panel.tsx"></script>
  </body>
</html>

Unfortunately this change stopped loading the referenced script so I've kept digging and I've found out that this got "processed" into this:

import { injectQuery as __vite__injectQuery } from "/@vite/client";
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true

try {
  for (const p of JSON.parse("[\"/src/elk-0.7.1.js\",\"/src/panel.tsx\"]")) {
    const url = new URL(p, "https://stub");
    url.searchParams.set("t", Date.now().toString());
    const req = url.pathname + url.search;
    await import(
      /* @vite-ignore */
      __vite__injectQuery(req, 'import'));
  }
} catch (error) {
  console.error(error);
}

As we may notice - both scripts include /src/ in the path but that was never the intention here. Luckily, I will be able to easily fix this. However, I did not see any error about it whatsoever - despite that it seems that there is a console.error here, associated with this request.

Reproduction

I could try to minimize my repro case later but I hope that the description of the issue is somewhat clear.

Logs

No response

System Info

System:
    OS: macOS 12.3
    CPU: (10) x64 Apple M1 Pro
    Memory: 40.38 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.22.11 - ~/Library/Caches/fnm_multishells/18695_1655822009676/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.16 - ~/Library/Caches/fnm_multishells/18695_1655822009676/bin/npm
    Watchman: 2022.06.06.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 95.1.31.88
    Chrome: 99.0.4844.51
    Chrome Canary: 101.0.4945.0
    Firefox Nightly: 79.0a1
    Safari: 15.4
    Safari Technology Preview: 11.2

Severity

annoyance

crxjs / chrome-extension-tools