Invariant Violation : [MSW] Fail to execute 'setupWorker' in a non-browser envionment. Consider using 'setupServer' for Node.js environment instead. 및 404 이슈 트러블 슈팅

[jinyoung234]

Trouble Shooting

mocks 폴더 내 handlers, worker, server를 세팅한 후 node 환경과 browser 환경을 구분 하기 위해 다음과 같은 코드를 구성했었다.

그 결과 브라우저 에선 의도대로 동작 했으나 node 환경에서 다음과 같은 에러가 발생하였다. 분명 분기 처리를 하여 server를 실행하도록 했는데 node 환경에서 worker가 실행 되었던 거 같다. next13 문제인가 싶어 next 버전을 12버전으로 낮춰봤지만 마찬가지였다.

Issue Tracking

mocks/index.ts

export * from './server'
export * from './browser'
export * from './handlers'

export async function initMocks() {
  if (typeof window === 'undefined') {
    const { server } = await import('@mocks')
    server.listen()
  } else {
    const { worker } = await import('@mocks')
    worker.start()
  }
}

initMocks()

위에 있는 export server, browser 파일과 initMocks의 await import랑 겹쳐 발생하는 문제였다.

export async function initMocks() {
  if (typeof window === 'undefined') {
    const { server } = await import('./server')
    server.listen()
  } else {
    const { worker } = await import('./browser')
    worker.start()
  }
}

initMocks()

다음과 같이 변경했다.

_app.tsx

export default function App({ Component, pageProps }: AppProps) {
  if (process.env.NEXT_PUBLIC_API_MOCKING) {
    import('@mocks')
  }
  return (
        <Component {...pageProps} />
  )
}

_app.tsx는 다음과 같이 코드를 구성했다.

하지만 404 에러가 발생하였고 여기서 엄청난 삽질이 시작되었다. msw/msw.js 깃헙 issue와 yarn berry 깃헙 issue를 모조리 뒤졌고 다음과 같은 이슈를 찾을 수 있었다.

_app.tsx

export default function App({ Component, pageProps }: AppProps) {
  const queryClient = new QueryClient()
  const [shouldRender, setShouldRender] = useState(
    !process.env.NEXT_PUBLIC_API_MOCKING,
  )
  useEffect(() => {
    async function init() {
      const { initMocks } = await import('@mocks')
      await initMocks()
      setShouldRender(true)
    }
    if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
      init()
    }
  }, [])
  if (!shouldRender) {
    return null
  }
  return (
    <ChakraBaseProvider theme={theme}>
      <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools />
        <Component {...pageProps} />
      </QueryClientProvider>
    </ChakraBaseProvider>
  )
}

이슈에 나와 있는 대로 useEffect와 shouldRender 상태를 이용해 문제를 해결하려 시도해보았다.

더 이상 404 에러가 발생하지 않는 것을 확인할 수 있었다.

useInitMocks.ts

import { useEffect, useState } from 'react'

const useInitMocks = () => {
  const [shouldRender, setShouldRender] = useState(
    !process.env.NEXT_PUBLIC_API_MOCKING,
  )
  useEffect(() => {
    async function init() {
      const { initMocks } = await import('@mocks')
      await initMocks()
      setShouldRender(true)
    }
    if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') {
      init()
    }
  }, [])
  if (!shouldRender) {
    return null
  }
}
export default useInitMocks

_app.tsx의 코드 가독성을 위해 custom hook으로 분리하여 추상화 하였다.

import { useInitMocks } from '@hooks'

export default function App({ Component, pageProps }: AppProps) {
  useInitMocks()
  return (
    <ChakraBaseProvider theme={theme}>
        <ReactQueryDevtools />
        <Component {...pageProps} />
    </ChakraBaseProvider>
  )
}

_app.tsx의 길이가 줄어드는 것을 확인할 수 있었다.

import { rest } from 'msw'

export const handlers = [
  rest.get('/api/test', (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ message: 'hello world' }))
  }),
]

로컬 환경에서 테스트를 진행하기 위해 다음과 같은 test 핸들러를 만들었다.

index.tsx

import axios from 'axios'
import { useEffect } from 'react'

async function testAPI() {
  const response = await axios.get('/api/test')
  return response
}

export default function Home() {
  useEffect(() => {
    testAPI().then((res) => {
      console.log(res)
    })
  }, [])
  return (
      <main>111</main>
  )
}

test api를 만든 후 useEffect를 통해 데이터를 가져오려 했다.

하지만 404 에러가 발생해서 커스텀 훅으로 현재 분리하진 못한 상태이다.

또한 전체적인 정확한 원인 파악이 어려운 상태이고, 구체적으로 어떻게 해결되었는지 원리를 이해하기가 어려워 시간날 때 글이 업데이트 될 거 같다.

추가 레퍼런스

msw discussion 1049에 대한 msw 메인테이너님의 답변
next.js discusstion 39695

[punchdrunkard]

useEffect를 그래서 추가하셨군요. 다만 이 부분 때문에 코드의 가독성이 떨어지네요 ㅜ

[jinyoung234]

_app.tsx에 있는 로직들을 커스텀 훅으로 분리 후 호출하는 식으로도 해봤는데 버그가 생겨서 다시 돌려놓게 되었습니다 ㅜㅜ 그 과정도 추가해놔야겠네여 감사합니다~

[punchdrunkard]

정확한 출처는 여기인것 같습니다!
mswjs/msw#1049 (comment)

[jinyoung234]

와우 이게 원본이 있었군여 .. 대박 ㅋㅋㅋㅋㅋㅋ 추가해놓겠습니다~

[punchdrunkard]

vercel/next.js#39695