inflearn logo
강의

Course

Instructor

Getting Familiar with Next.js - Migrating

Creating an Entry Point Page

Cannot find module 에러

Resolved

911

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

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

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

에이전트 에러

0

10

1

커스텀 에이전트 생성하기

0

7

1

mission 09-01 을 수행할 수 없어요

0

10

1

outputStyle 설정하는데 어디서 문제일까요?

0

10

2

test.txt파일 삭제시 rm명령어이니 클로드의 질문이 있어야 한다고 하셨는데

0

7

1

검은화면

0

13

2

강의교환링크안열려요.....

0

14

1

영상재생에러 [확인부탁드려요!!!]

0

13

1

클로드 채팅에서 코드로 넘어가기

0

16

1

클로드 코드 시작하기

0

14

1

Context API vs Zustand 그리고 Auth

0

20

2

110강부터 따라가기가 힘듭니다...

0

39

1

커서에서 붙여넣기

0

22

1

깃허브 사용시 폴더경로 관련질문

0

18

1

[reducer] 기능별 폴더 구조 설계/ 파일 분리로 유지 보수 가능한 아키텍처 구축

0

15

2

순수 함수 / 순수 컴포넌트

0

18

1

스니펫이 이상해요

0

30

2

/output-style 명령어는 폐기 되었다고 나오네요.

0

37

1

프롬프트 작성시 html, css, javascript

0

31

1

강의영상 버퍼링

0

29

3

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

0

264

1

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

0

738

1

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

0

429

2

fake-commerce-app 주소 404 오류

3

347

1