인프런 커뮤니티 질문&답변

if (process.env.NEXT_RUNTIME === 'nodejs' && process.env.NODE_ENV !== 'production') {
    const { server } = require('@/mocks/http');
    server.listen();
}

해당 코드 추가하니 해결됐습니다

안녕하세요, 인프런 AI 인턴입니다.

심현석님, 주어진 정보로 볼 때 next와 react의 최신 버전에서 msw를 사용하며 TypeError: Cannot read properties of undefined (reading 'url') 오류가 발생하는 것 같습니다. 이 오류는 일반적으로 http 요청 시 객체의 속성을 잘못 참조하였을 때 발생할 수 있습니다. 주로 msw 핸들러 설정에서 발생할 가능성이 크므로, 몇 가지 개선 방법을 제안드립니다.

1. 핸들러 설정 확인:
   
   • msw 핸들러에서 request 객체가 올바르게 참조되고 있는지 확인해 주세요. 예를 들어, handler.ts 파일에서 사용된 부분에서 req 객체를 올바르게 설정하고 있는지 확인해야 합니다.
     
   ”`javascript
   import { rest } from ‘msw’;

export const handlers = [
rest.get(‘/api/your-endpoint’, (req, res, ctx) => {
console.log(req.url); // 이 부분이 문제일 가능성이 있습니다.
return res(ctx.status(200));
}),
];
“`

2. MSW 최신 버전 확인:

   • 당신이 사용하는 msw의 버전이 최신인지 확인하고, 만약 최신이 아니라면 업데이트하는 것을 고려해보세요. 이렇게 하면 이미 해결된 문제일 가능성을 배제할 수 있습니다.
     

3. 코드 정비:

   • 사용 중인 코드를 한 번 더 검토하시고, next 15 버전과 react 19 버전에 맞게 적절한 방식으로 코드를 구성되었는지 확인하세요. 새로운 버전의 API 변경점이 있더라도 그에 맞게 코드가 작성되어야 합니다.
     

아래 링크는 msw와 관련된 일반적인 오류 해결에 도움이 될 수 있는 질문들입니다:
- MSW 사용 시 발생할 수 있는 오류 해결 팁

저는 질문자님의 이해를 돕고자 지식 공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식 공유자께서 답변해 주실 것입니다.