Vite inline script in `index.html` causes `Failed to parse JSON file` crash with Express middleware mode + Chromium DevTools

[learkonas]

Vite inline script in index.html causes Failed to parse JSON file error with Express middleware mode + Chromium DevTools

Using the recommended Vite setup (inline <script type="module"> in index.html) causes:

Pre-transform error: Failed to parse JSON file.

when:

1. Vite runs in Express middleware mode
2. DevTools is open

If the Vite logger is wired to a fatal handler (e.g. process.exit(1)), this crashes the dev server.

This is a common setup for projects ported over from Replit starter templates, which use Express as a host server with Vite middleware mode for development, so could affect a bunch of people

Steps to reproduce

1. Create a Vite + Express app using middleware mode with a catch-all SPA handler that calls vite.transformIndexHtml(url, template) for all unmatched routes
2. Run npx -y grab@latest init (adds inline <script type="module"> to index.html)
3. Start the dev server
4. Open http://localhost:5000 in a chromium browser with DevTools open
5. Server logs Pre-transform error: Failed to parse JSON file.

Expected behavior

The dev server starts without errors regardless of whether Chromium DevTools is open.

Actual behavior

Pre-transform error: Failed to parse JSON file. appears in the server console within seconds of page load.

Debugging

To confirm this is the cause, add a console.error before the error throw in
node_modules/vite/dist/node/chunks/dep-*.js. Search for Failed to parse JSON file
and add a log line above it:

// Before:
this.error(Failed to parse JSON file + msg, position);

// After:
console.error([vite:json DEBUG] Failed file: ${id});
this.error(Failed to parse JSON file + msg, position);

You'll get something like what I got:

19:48:00 [vite] Pre-transform error: Failed to parse JSON file.
[vite:json DEBUG] Failed file: /.well-known/appspecific/com.chrome.devtools.json?html-proxy&index=0.js

Explanation

1. DevTools automatically requests /.well-known/appspecific/com.chrome.devtools.json
2. The Express catch-all SPA handler serves index.html for this request via vite.transformIndexHtml(url, template)
3. Vite extracts the inline <script type="module"> as an HTML proxy module, inheriting the parent URL: /.well-known/appspecific/com.chrome.devtools.json?html-proxy&index=0.js
4. Vite's vite:json plugin matches the .json extension in that URL and tries to parse the JavaScript proxy content as JSON
5. Parsing fails → error

Suggested fix

Easy workaround: exclude /.well-known/* from the Express SPA fallback route

Add a note to the Vite instructions in the README for Express middleware mode setups, recommending importing from the entry file instead:

⚠️ Express middleware mode: If you're running Vite in Express middleware mode
(createServer({ middlewareMode: true })), which is common in Replit starter templates
and fullstack Express+React monorepos, the inline script approach can cause
Failed to parse JSON file errors when Chromium-based DevTools (Chrome, Edge, Brave, etc.)
are open. This happens because Chromium DevTools requests a .json URL that the Express
catch-all handler passes through vite.transformIndexHtml(), causing Vite to create an
HTML proxy module with .json in its URL.

For these setups, import react-grab from your entry file instead:

// src/main.tsx
if (import.meta.env.DEV) {
import("react-grab");
}

[pullfrog]

  ^{｜ Build this ➔ ｜ Make a plan ➔ ｜ pullfrog.com}

[JiwaniZakir]

The root cause is that the Express catch-all is forwarding Chromium's /.well-known/appspecific/com.chrome.devtools.json request into vite.transformIndexHtml(), which processes the inline <script type="module"> added by grab init and generates an html-proxy module at /.well-known/appspecific/com.chrome.devtools.json?html-proxy&index=0.js. Vite's vite:json plugin then intercepts that transform request because the base path ends in .json, attempts to parse the inline script content as JSON, and throws Failed to parse JSON file. The fix likely lives on the Express side — the catch-all should exclude /.well-known/ (and ideally any non-HTML content-type requests) before delegating to vite.transformIndexHtml(), since Vite's html-proxy mechanism was never designed to handle non-HTML URLs being fed into it.