inflearn logo
강의

Course

Instructor

Getting Familiar with Next.js - Migrating

Creating an Entry Point Page

Cannot find module 에러

Resolved

863

tarolong

7 asked

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

Answer 2

0

hajoeun

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

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

 

감사합니다.

0

communityai8509

안녕하세요, 인프런 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와 충돌하지 않도록 구성했는지 확인하십시오.

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

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

명시적 타입 선언(콜론 타입 선언)과 as 타입 단언 차이

0

4

1

max x5 플랜을 결제했습니다.

0

6

1

클로드 초기 설정

0

6

1

사용자 스코프 설정 파일 적용 문제

0

7

1

클로드코드 유료플랜 할인 방법이 있을까요?

0

21

0

API Error : 400 에러의 원인과 해결방법이 궁금합니다!!

0

16

2

퍼미션 권한 설정 문의

0

19

2

Next.js + Tanstack Query BFF 구조 질문

0

13

1

커서에서 shift+enter가 안됩니다.

0

20

2

mcp 설치를 못하겠어요

0

35

2

라이브러리 관련 질문 있습니다!

0

26

2

노션 학습 자료 권한 요청

0

17

1

output-styles은 Claude Code의 공식 기능이 아니라고 하는데 혹시 변경된걸까요?

0

24

2

클로드 변경

0

26

2

/config 에서 output-style 을 변경

0

24

1

한국어 문제

0

28

2

part2강의 문의사항입니다.

0

19

2

Node.js 관련 질문드립니다.

0

29

3

클로드 버전업 설치

0

26

2

쿠폰 문의 드립니다.

0

20

2

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

0

232

1

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

0

704

1

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

0

385

2

fake-commerce-app 주소 404 오류

3

324

1