might be need update docs for Vite setting

[ryota-murakami]

I have a OSS that React + TS Vite template and added msw setup recently. vite-react-ts-extended

I noticed that Vite's dev-server serving React code before msw Service Worker enabled within general setting like following screen shot(please see console log message orders).

So, I added Promise to ensure execute Service Worker registration code firstly, then msw working fine.

const runReact = () => {
  // @ts-ignore v18 @types coming not yet
  const root = ReactDOM.createRoot(document.getElementById('root'))
  root.render(<App />)
}

if (process.env.NODE_ENV === 'development') {
  import('../mocks/browser')
    .then(({ worker }) => {
      worker.start()
    })
    .then(() => runReact())
} else {
  runReact()
}

I guess this behavior relevant to dependency prebuild, there is no evidence though.

I'm not sure my above solution is ideal one, but I think we have to update for Vite's msw setting documentation.

• reproduction here

git clone https://github.com/ryota-murakami/msw-vite-fetch-failed-reproduction.git
cd msw-vite-fetch-failed-reproduction
yarn
yarn dev
// then open browser and you can see reproducion in dev tools

• fixed with Promise code here

[kettanaito]

Hey, @ryota-murakami! Thanks for reaching out.

We don't currently have a Vite example in our examples. We do mention Deferred mounting recipe in the documentation for anybody who's faced with race conditions between their app making a request and the service worker registering. This looks exactly like what's happening in your case. I'm not sure if there's anything to update.

[ryota-murakami]

@ryota-murakami Thank you for speedy response!
I missed Deferred mounting, that completely covering Vite usecase!
I think current document is writing enough and we don't have to adding any extra section.

Thank you so much! 😄