vue3でmswを使ったらjsonレスポンスが返らずhtmlのDOMが返ってきたときの対処

自分の場合は Service Worker が起動する前にリクエストが走って、画面リロードしようがキャッシュが有効で304 Not Modifiedが返ってくる状況だったと思われる。

Async/Awaitを使って起動順を整理したら解消した。

main.ts でcreateAppしているところを以下のように修正して worker.startとcreateAppの順番を整理した。

main.ts

async function enableMocking() {
  if (process.env.NODE_ENV !== 'development') {
    return
  }
  const { worker } = await import('./mocks/browser')
  return worker.start({
    onUnhandledRequest: 'bypass'
  })
}

enableMocking().then(() => {
  const app = createApp(App)

  app.use(createPinia())
  app.use(router)

  app.mount('#app')
})