Page MenuHomePhabricator

[Timebox 8hr] Fix broken UI netlify with mock store
Open, Needs TriagePublic

Description

The auto deployed versions of PRs of our UI repo with netlify seem to be broken.

When loading a page in the chrome console I see:

default_handlers.js:136 Uncaught TypeError: Cannot read properties of undefined (reading 'post')
    at eval (default_handlers.js:136:39)
    at ./src/backend/mocks/default_handlers.js (app.js:3440:1)
    at __webpack_require__ (app.js:4406:42)
    at eval (browser.js:6:75)
    at ./src/backend/mocks/browser.js (app.js:3429:1)
    at __webpack_require__ (app.js:4406:42)
    at eval (main.js:37:7)
    at ./src/main.js (app.js:3462:1)
    at __webpack_require__ (app.js:4406:42)
    at app.js:4672:109
eval @ default_handlers.js:136
./src/backend/mocks/default_handlers.js @ app.js:3440
__webpack_require__ @ app.js:4406
eval @ browser.js:6
./src/backend/mocks/browser.js @ app.js:3429
__webpack_require__ @ app.js:4406
eval @ main.js:37
./src/main.js @ app.js:3462
__webpack_require__ @ app.js:4406
(anonymous) @ app.js:4672
__webpack_require__.O @ app.js:4442
(anonymous) @ app.js:4673
(anonymous) @ app.js:4675
vue.esm.js:9390 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

presumably some aspect of the mock store definitions has got broken somewhere.

A/C:

  • fix netlify previews with mock store so they work again

Event Timeline

From a quick look it seems to me like updating msw in https://github.com/wbstack/ui/pull/1043 from 0.35.0 to 2.11.3 is probably the cause of the breakage.

From what I can see there is no longer a rest option and looking at the example view handler in https://github.com/mswjs/examples/blob/main/examples/with-vue/src/mocks/handlers.ts as well as the 1->2 migration guide we should probably be replacing it with http.

Tarrow renamed this task from Fix broken UI netlify with mock store to [Timebox 4hr] Fix broken UI netlify with mock store.Mar 6 2026, 10:23 AM
Tarrow removed Tarrow as the assignee of this task.Mar 6 2026, 2:45 PM

I started attempting to migrate things but this needs potentially some more substantial changes to test locally:

  • potentially removing the devServer config from vue.config.js
  • running locally with something like
    • fresh-22 -net
    • VUE_APP_API_MOCK=1 npm run serve
  • Follow the steps from the QuickStart guide to conditionally enable mocking
  • Confirm that you actually see the mocking enabled

Once you have a local setup working then it should be possible to follow this migration guide and make some progress. Initially I didn't realise the MSW was also not loaded at all in my environment.

Ollie.Shotton_WMDE renamed this task from [Timebox 4hr] Fix broken UI netlify with mock store to [Timebox 8hr] Fix broken UI netlify with mock store.Apr 17 2026, 7:46 PM

It seems this does not only break on netlify builds but in general. I made a clean install of npm packages locally and now see the same error as on netlify.

fwiw rolling the package back locally worked; should we do that in the repo as well to unblock netlify previews?

npm install --save-dev msw@0.35.0