MSW + React + Vite: Failed to HMR Update if MSW active

[rizaldirnm]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 18 or higher

Browsers

Chromium (Chrome, Brave, etc.)

Reproduction repository

https://github.com/rizaldirnm/msw-vite

Reproduction steps

clone repo: https://github.com/rizaldirnm/msw-vite

yarn install

yarn dev

Current behavior

1. Some how MSW mocking request in asset react.svg
   

2. If we try change something in app, HMR failed to deliver asset because MSW mocked the request
   

Expected behavior

MSW should mock only registered handler.

[shanereid]

+1

I'm getting the exact same error on a pretty fresh install.

• I'm on macOS
• Happens on Chrome, but not Safari
• { onUnhandledRequest: "bypass" } does not fix the issue.
• Basically exact error as above, says it hot updates but does not. msw seems to be intercepting hmr requests? (screenshot attached)
• react 18.3.1
• vite 5.4.8
• msw 2.7.0

[charlieforward9]

May be related, I'm getting:

[MSW] Warning: intercepted a request without a matching request handler:

  • GET /node_modules/.pnpm/[email protected]/node_modules/graphql/language/parser.mjs?v=cffff488

If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/getting-started/mocks

Looks like most of them are coming from the graphql lib...

[yeo311]

I encountered the same issue and identified the cause.

Within msw, the @bundled-es-modules/cookie package is used to parse request cookies.

This package validates cookie names using a regular expression, and when the validation fails, it throws the error mentioned above.

    var cookieNameRegExp = /^[!#$%&'*+\-.^_`|~0-9A-Za-z]+$/;

https://github.com/bundled-es-modules/cookie/blob/7591afcfa0587459a5e579d16e7f48b6c732199d/index-esm.js#L35C5-L35C61

In my case, some of the cookies used by the service included square brackets in its name. ex) tr[vid]

Looking at the regular expression, it does not account for square brackets. According to RFC 6265, square brackets are not allowed in cookie names.

Since I couldn't remove the problematic cookie, I patched the regular expression using pnpm patch.