[에러 일지] MSW - Failed to register the Service Worker: Failed to register a ServiceWorker for scope ...

🚫 [MSW] Failed to register the Service Worker: Failed to register a ServiceWorker for scope ('http://localhost:3001/') with script ('http://localhost:3001/mockServiceWorker.js'): The script has an unsupported MIME type ('text/html'). at getWorkerInstance (getWorkerInstance.ts:85:1) at async startWorkerInstance (createStartHandler.ts:30:1)

MSW라는 모킹 라이브러리로 모의 서버를 구현하던 중에 worker를 실행하려고 하면 위와 같은 에러가 발생했다.

(index.tsx)

if (process.env.NODE_ENV === "development") {
  const { worker } = require("./mocks/browser");
  worker.start();
}

해당 에러는 프로젝트 내에 mockServiceWorker.js 파일이 없기 때문에 발생한 에러이다.
아래 명령어를 입력하여 public 폴더에 mockServiceWorker.js를 생성해주자.

npx msw init public/

yarn npm msw init public/

public 폴더를 확인해보면 해당 파일이 생성되어 있음.

콘솔에서도 MSW가 정상적으로 실행되는 것을 확인할 수 있다.