Package path ./browser is not exported from package
Package path ./browser is not exported from package
버전
Browser : Chrome
MSW: 2.0.9
Node.js : 20.10.0
Next.js: 14.0.3
에러 코드
//broswer.ts
"use client";
import { setupWorker } from "msw/browser";
import { handlers } from "./handlers";
export const worker = setupWorker(...handlers);
발생 원인
https://github.com/mswjs/msw/issues/1877
Next 14 버전에서 MSW 모킹 라이브러리를 사용할때 Service mock enabled가 나타나지 않고 Package path ./browser is not exported from package
가 나타나는 현상
해결 방법
근본적인 해결 방법은 아니다. MSW 업데이트까지 임시로 Node.js의 서버를 가동 시키는 방법
//... mock/browser.ts
import { setupWorker } from "msw/browser";
import { handlers } from "./handlers";
export const worker = setupWorker(...handlers);
// ... mock/handlers.ts
import { http, HttpResponse } from "msw";
import order from "./MOCK_DATA.json";
let orders = order;
/* msw 라이브러리를 사용하여 mock API 구현 */
export const handlers = [
/* 주문 목록 가져오기 */
http.get("/orders", () => {
return HttpResponse.json(orders);
}),
];
// ... mock/http.ts
import { handlers } from "./handlers";
import express from "express";
import cors from "cors";
import { createMiddleware } from "@mswjs/http-middleware";
const app = express();
const port = 8080;
app.use(
cors({
origin: "http//localhost:8080",
optionsSuccessStatus: 200,
credentials: true,
})
);
app.use(express.json());
app.use(createMiddleware(...handlers));
app.listen(port, () => console.log(`Mock Server is running,${port}`));
//package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"mock": "npx tsx watch ./src/app/mock/http.ts"
},
따로 터미널을 열어 임시로 mock 서버를 가동