[issues] Package path ./browser is not exported from package [next.js]

카테고리 : Issues
태그: issue · Next.js · next 14.0.3 · MSW · browser.ts · handlers.ts · http.ts · issues · Package path ./browser is not exported from package · 에러
등록일: 2023년 12월 11일
최근 업데이트: 2023년 12월 11일

---

• 버전
• 에러 코드
• 발생 원인
• 해결 방법

버전

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 서버를 가동

참조 : https://github.com/ZeroCho/next-app-router-z