inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

Cannot find module 에러

해결된 질문

904

억수

작성한 질문수 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와 충돌하지 않도록 구성했는지 확인하십시오.

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

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

2강 퀴즈를 푸려는데 자꾸 수강하지 않은 수업이있는데.. 다들었습니다 ㅜ

0

9

1

코덱스 입력한 텍스트만 받을수 있을까요?

0

3

1

사업자 등록

0

12

1

서브에이전트 실행중에도 대기해야 할까요?

0

8

1

소스코드 제공여부

0

15

2

궁금했던 질문입니다. 바로 콤마위치 입니다.

0

11

1

62강 실습자료가 잘못되었습니다.

0

16

1

37강에서 ROADMAP.md 파일

0

26

2

.claude, setting~, permission 했을 때 Bash 안 보여요

0

20

2

[미션4] open with Live Server 클릭시 브라우저 안뜸

0

23

3

사용량 한도 도달

0

34

2

Cursor를 실행했을 때 나오는 화면이 달라요

0

23

2

Claude code 대화하는 부분이 위치변경 문의 드립니다.

0

21

2

기본 파일 구조

0

23

2

setting.local.json 파일 안보일떄

0

26

2

테마 개발의 한계, 업종이 대체 할 수 있을까요?

0

21

2

Shrimp Task Manager와 Fable5 plan모드 성능비교

0

31

2

git hub 들어가서 setting >> pages 들어갔는데

0

35

2

git config 오류 관련 문의

0

32

2

task master, shrimp task manager 질문있어요

0

19

1

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

0

259

1

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

0

731

1

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

0

415

2

fake-commerce-app 주소 404 오류

3

343

1