[Trouble Shooting] Uncaught ReferenceError: require is not defined

⚠️ 에러 내용

프로젝트를 세팅하거나 실행하는 중에 아래처럼 코드를 작성하여 외부 모듈을 가져와야 하는 경우가 있었습니다. 그러한 경우에 Uncaught ReferenceError: require is not defined 와 같은 에러가 발생했습니다. 

const 변수명 = require('경로');

 

콘솔 에러

📌 에러 원인

require is not defined 오류는 보통 브라우저 환경에서 발생합니다. Node.js에서 외부 모듈을 가져오는 CommonJS 모듈 시스템을 지원하지만, 브라우저에서는 이를 기본적으로 지원하지 않습니다. 이 오류가 발생하는 주된 이유는 웹 페이지에서 Node.js 코드를 실행하려고 시도했기 때문입니다.

 

브라우저는 보안 및 성능 이유로 Node.js와 같은 서버 사이드 환경을 지원하지 않으므로, Node.js 코드를 브라우저에서 직접 실행할 수 없습니다.

 

✅ 해결 방법

브라우저에서 JavaScript를 실행할 때는 대신에 웹 페이지의 스크립트를 로드하고, 브라우저 환경에서 지원되는 JavaScript 기능을 사용해야 합니다. 만약 서버 측 코드를 클라이언트 측에서 실행해야 하는 경우에는 웹 브라우저용으로 변환된 코드를 사용하거나, 서버와 클라이언트 간의 통신을 위한 API를 구성하여 데이터를 전송하는 방법을 고려해야 합니다. 즉, 현재 실행중인 환경이 CommonJS 환경이 아니기에 문법적인 오류가 발생한 것입니다. 

1) package.json 파일없을 경우

ES6 형식으로 실행이 됩니다. 

2)  package.json의 "type" 필드 값이 "commonjs" 가 아닌 경우

다음과 같이 module로 설정이 되어 있는 경우 "type" : "module" 부분 제거하면 된다.

{
 ...
 
 "type":'module'

 ...
}

 

"type" : "module" 이라고 설정되어 있기 때문에 모듈 단위로 import/export 하는 문법만 이해하기에 발생하는 에러이다. 따라서, 두 가지 방법을 사용하면 해결할 수 있습니다.

 

1) require -> import 변환

 

다음과 같이 코드를 변경해주면 됩니다. commonJS 문법이 아닌 ES6의 문법을 사용하는 방법이다.

// const 변수명 = require('경로');

import 외부모듈 from '경로'

 

 

2) "type" : "commonjs" 로 수정

 

기존의 "type" : "module" 이 부분을 제거하거나 "type": "commonjs” 로 바꾸면 해결된고 한다. 제거해도 되는 이유는 package.json의 "type"필드는 디폴트값이 commonjs이기 때문입니다.

 

 

require & module.export (Node.js)
import & export (JS ES6)