MSW enabled 시점이 loader 실행 시점보다 느리다

[leegwae]

🔄 How to reproduce bug

1. loader에서 API 요청하는 라우트로 진입한다. (예: /login)
2. MSW enabled보다 loader에 등록한 함수가 먼저 실행되어 API 요청에서 다음과 같은 오류가 발생한다.

그래서 현재 리프레쉬 토큰 재발급 로직이 애플리케이션을 새로고침하는 경우 제대로 동작하지 않는다. (리프레쉬 토큰 있어도 loader에서 API 요청시 MSW가 켜있지 않아 SyntaxError의 발생하여 무조건 다시 로그인해야한다.)

현재 상황

https://mswjs.io/docs/recipes/deferred-mounting

docs에 따르면 모킹이 실행된 후 React root를 DOM에 마운팅할 수 있는데, 나는 해봤는데 안 된다...

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

function prepare() {
  if (process.env.NODE_ENV === 'development') {
    const { worker } = require('./mocks/browser')
    return worker.start()
  }

  return Promise.resolve()
}

prepare().then(() => {
  ReactDOM.render(<App />, document.getElementById('root'))
})

이거 해보고 안되어서 이슈 열었던 게 3월인데

mswjs/msw#1653

msw 이슈보니까 6월에 동일한 이슈가 아직도 열려있다.