Dodgy HMR notifications

[fluffynuts]

Using the vite-plugin-vue-dev-tools package in vite (all latest, at time of writing), I often see log spam in the console, like:

Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    parse https://localhost:8888/__devtools__/assets/index-BSzMGd0T.js line 154 > srcScript:23
    on https://localhost:8888/__devtools__/assets/index-BSzMGd0T.js line 154 > srcScript:23
    notifyListeners https://localhost:8888/@vite/client:154
    notifyListeners https://localhost:8888/@vite/client:154
    handleMessage https://localhost:8888/@vite/client:862
    createHMRHandler https://localhost:8888/@vite/client:458
    dequeue https://localhost:8888/@vite/client:480
    enqueue https://localhost:8888/@vite/client:472
    enqueue https://localhost:8888/@vite/client:466
    createHMRHandler https://localhost:8888/@vite/client:458
    onMessage https://localhost:8888/@vite/client:305
    connect https://localhost:8888/@vite/client:413
    connect https://localhost:8888/@vite/client:412
    connect https://localhost:8888/@vite/client:751
    connect https://localhost:8888/@vite/client:289
    connect https://localhost:8888/@vite/client:373
    <anonymous> https://localhost:8888/@vite/client:823
index-BSzMGd0T.js line 154 > srcScript:23:58828

turns out, sometimes the HMR client is being called with no data for notifyListeners (vite/client/dist/client.mjs). Sometimes this seems to get into a tight loop, spamming hundreds of console errors over the course of a second or two, and continually rising.

Right now, I've worked around it with an automated patch applied before starting up vite that modifies the notifyListeners method from:

	async notifyListeners(event, data) {
		const cbs = this.customListenersMap.get(event);
		if (cbs) await Promise.allSettled(cbs.map((cb) => cb(data)));
	}

to

	async notifyListeners(event, data) {
                if (!data) { return; }
		const cbs = this.customListenersMap.get(event);
		if (cbs) await Promise.allSettled(cbs.map((cb) => cb(data)));
	}

because the call will definitely fail when data is undefined (the value I'm seeing come through). I believe this is coming from the embedded vite-plugin-vue-devtools because I can trigger it by navigating about in the overlay that the button shows when clicked - simply changing which sub-view is used from the navigation buttons highlighted below will be enough to (on one or more of them) trigger the issue:

The overall effect, when not patched, is sometimes just annoying log spam, but quite often, when getting into a loop, degraded performance in the browser, which I can only stop by fully reloading the page.

[skirtles-code]

I haven't been able to hit the problem you described.

The stacktrace provided some clues, but it wasn't enough for me to narrow it down. There are lots of places that call JSON.parse. If you can identify the surrounding context for the code making that call we might be able to work back from there. It's probably in the middle of long line of minified code, but just seeing the code that's around it might be enough to figure out where it came from originally.

We'll probably need a minimal reproduction in order to investigate this properly. I suspect this problem is triggered by a specific combination of factors, and without a reproduction it might not be possible to guess what those are.

[fluffynuts]

ok, I'll try remember to update my patch to add a stack dump when it happens - perhaps I can get a little closer to the issue.