inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

손에 익는 Next.js - 마이그레이션하기

엔트리포인트 페이지 만들기

Cannot find module 에러

해결된 질문

863

억수

작성한 질문수 7

0

vite 로 작성한 경우를 마이그레이션 하는데요.

강의에 따라서 진행하였는데 최종 아래처럼 에러가 발생합니다.

Require stack:

\node_modules\next\dist\server\dev\next-dev-server.js

vite\node_modules\next\dist\server\dev\next-dev-server.js

vite\node_modules\next\dist\server\next.js

vite\node_modules\next\dist\server\lib\start-server.js

package.json 은 아래와 같아요.

{
  "name": "next-migration-02-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "next": "^14.1.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "20.11.24",
    "@types/react": "^18.2.56",
    "@types/react-dom": "^18.2.19",
    "@typescript-eslint/eslint-plugin": "^7.0.2",
    "@typescript-eslint/parser": "^7.0.2",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.56.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.1.4"
  }
}

관련해서 안내좀 부탁드립니다.

좋은 주말 되세요~

react next.js vitejs

답변 2

0

하조은

억수님, 안녕하세요! 질문 확인이 늦었습니다.

혹시 해당 에러를 마주한 상황에 어떤 명령어를 입력하셨는지 확인해주실 수 있을까요?
답변 남겨주시면 이번에는 빠르게 도움 드릴 수 있도록 하겠습니다.

 

감사합니다.

0

인프런 AI 인턴

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

Next.js 마이그레이션 과정에서의 문제 해결을 위해 말씀해 주신 내용을 바탕으로 몇 가지 확인해 볼 사항을 안내드립니다.

  1. 우선, Next.js와 Vite는 서로 다른 번들러를 사용하기 때문에 next 명령어로 실행하거나 빌드할 때 Vite 관련 의존성이나 설정이 포함되어 있지는 않은지 확인해 보세요.
  2. package.json에 “type”: “module”이 설정되어 있는 경우에는 importexport 문법을 사용하도록 되어 있습니다. 만약 CommonJS 모듈 시스템을 사용하는 경우(require, module.exports 등), 이 설정을 제거하거나 관련 구문을 ESM 방식으로 변경해야 합니다.
  3. next 폴더 내부의 모듈을 직접 require 하고 있지 않은지 확인해 보세요. 일반적으로 사용자 코드에서 내부 모듈을 직접 require 하는 경우는 드뭅니다.
  4. Next.js의 버전이 최신 버전과 호환되는지, 모든 의존성이 적절한 버전을 가지고 있는지 확인해 보세요. 필요한 경우, npm install 또는 npm update로 최신 패키지를 설치하거나 업데이트할 수 있습니다.

문제가 지속될 경우 Next.js 프로젝트 폴더에서 node_modules 폴더와 package-lock.json 파일을 제거한 후 재설치를 진행해 보시는 것도 좋은 방법입니다.

rm -rf node_modules
rm package-lock.json
npm install

또한, Vite 관련 설정을 제거하거나 번들러 설정이 Next.js와 충돌하지 않도록 구성했는지 확인하십시오.

에러와 관련된 부분을 더 자세히 알기 어렵기 때문에, 추가적으로 로그나 화면 캡쳐를 제공해주시면 더 정확한 도움을 드릴 수 있을 것 같습니다.

도움이 되셨길 바라며, 문제 해결 후 즐거운 주말 보내시기 바랍니다!

BFF의 필요성

0

5

0

Github 404 Error

0

15

1

안녕하세요 유튜브 보고 재밌을꺼 같아서 강의 결제해서 보고잇습니다.

0

13

2

/update-roadmap 는 언제 어떻게 사용하는건지요?

0

20

2

깃 관련질문입니다!

0

20

2

53강 질문

0

23

2

styled-components(전역)

0

14

0

misson 6 질문

0

23

2

클로드 설치버전 문의

0

19

2

서브에이전트를 실행했을때 강의내용과 다르게나와요.

0

28

2

커서 설치했는데 강의화면이랑 달라요.

0

25

3

노션 열기에 도움이 필요합니다.

0

19

2

노션 파일 권한

0

19

2

좋은 강의 자료 감사합니다.

0

23

2

PRD 생성 서브에이전트

0

19

2

유튜브 영상보고 강의 등록하였습니다.

0

24

2

클로드 코드 토큰 절약 공식 플러그인 4개

0

23

1

강의 내용 실습관

0

25

1

노션 파일 없음

0

23

3

Claude / 터미널 기본명령어

0

25

5

CRA에서 Next.js로 마이그레이션하기에서 compilerOptions.moduleResolution bundler 불가

0

234

1

기존 react 에서 navigate 에 state 로 데이터를 전달했습니다.

0

705

1

Create React App에서 Next.js로 마이그레이션하기 의 깃허브 소스도 npm i 하면 에러가 발생합니다.

0

385

2

fake-commerce-app 주소 404 오류

3

324

1