Error after SvelteKit update - blocks the entire page when `vitePlugin.experimenta.inspector` is enabled

[lukaszpolowczyk]

Describe the bug

Error after SvelteKit update - blocks the entire page when vitePlugin.experimenta.inspector is enabled.

Browser console log:

GEThttp://localhost:5173/node_modules/@sveltejs/vite-plugin-svelte/src/ui/inspector/load-inspector.js
[HTTP/1.1 500 Internal Server Error 0ms]
Wczytanie modułu z adresu „http://localhost:5173/node_modules/@sveltejs/vite-plugin-svelte/src/ui/inspector/load-inspector.js” zostało zablokowane z powodu niedozwolonego typu MIME („”).
Wczytanie się nie powiodło dla modułu ze źródłem „http://localhost:5173/node_modules/@sveltejs/vite-plugin-svelte/src/ui/inspector/load-inspector.js”.
Wczytanie się nie powiodło dla modułu ze źródłem „http://localhost:5173/node_modules/@sveltejs/kit/src/runtime/env.js?v=37e7caa4”.
Wczytanie się nie powiodło dla modułu ze źródłem „http://localhost:5173/node_modules/svelte-hmr/runtime/index.js?v=37e7caa4”.
Wczytanie się nie powiodło dla modułu ze źródłem „http://localhost:5173/node_modules/svelte-hmr/runtime/overlay.js?v=37e7caa4”.

Server terminal log:

 [vite] Internal server error: ENOENT: no such file or directory, open '/media/WebDev/svelte-project/node_modules/@sveltejs/vite-plugin-svelte/src/ui/inspector/load-inspector.js?v=37e7caa4'

Reproduction

1. install and enable the latest SvelteKit:

npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open

2. Add this to svelte.config.js:

  vitePlugin: {
    experimental: {
      inspector: {
        toggleKeyCombo: "os-alt",
        holdMode: true
      }
    }
  }

To have this effect:

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  },
  vitePlugin: {
    experimental: {
      inspector: {
        toggleKeyCombo: "os-alt",
        holdMode: true
      }
    }
  }
};

export default config;

3. Refresh the page

Result: white page in the browser, log in the browser console, log in the server terminal

Logs

No response

System Info

System:
    OS: Linux 5.10 Arch Linux
    CPU: (4) x64 AMD Athlon(tm) X4 950 Quad Core Processor
    Memory: 9.98 GB / 15.07 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 18.4.0 - ~/.nvm/versions/node/v18.4.0/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 8.12.1 - ~/.nvm/versions/node/v18.4.0/bin/npm
  Browsers:
    Brave Browser: 100.1.37.109
    Firefox: 102.2.0esr
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.69 
    @sveltejs/kit: next => 1.0.0-next.454 
    svelte: ^3.44.0 => 3.49.0 
    vite: ^3.1.0-beta.1 => 3.1.0-beta.1

Severity

blocking all usage of vite-plugin-svelte

[chrisfromredfin]

Can confirm this is reproducible with the error in the node console. Interestingly, node_modules/@sveltejs/vite-plugin-svelte/src/ui/inspector/load-inspector.js does exist.

[chrisfromredfin]

(vite 3.1.0-beta1)

[lukaszpolowczyk]

@chrisfromredfin Beta is required by the latest SvelteKit - sveltejs/kit#6398

[chrisfromredfin]

Understood; was just confirming version.

[jhubbardsf]

I'm waiting for this to be fixed too. In the meantime if you want to use it, I made (forked off another repo) a limited options workaround months ago because I could use custom z-index because I didn't understand the customInject css option here. It works with 454 though so if you wanna use it until this is fixed, feel free.

Super basic, just allows you to enable-disable via meta-shift, enable/disable by default, and add a z-index to the overlays.

npm link
github

[dominikg]

The error is caused by a new feature in vite that appends a ?v=hash to file imports. This needs to be stripped, see #423

[lukaszpolowczyk]

@dominikg Ok. When will you release this fix?

[dominikg]

@lukaszpolowczyk released in @sveltejs/vite-plugin-svelte@1.0.3 https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/CHANGELOG.md#103

[lukaszpolowczyk]

@dominikg Is it somehow possible to install this and use it directly before SvelteKit takes vite-plugin-svelte version 1.0.3?

[dominikg]

yes, you can update vite-plugin-svelte. If a regular update doesn't work, you can use an override: https://pnpm.io/package_json#pnpmoverrides (npm and yarn have overrides too, but their config is different)