[React] Uncaught ReferenceError: require is not defined

2022.7.27 (수) 작성

1. 에러❗️

Uncaught ReferenceError: require is not defined

2. 상황

script.js 에 다음 코드를 넣었는데 index.html을 브라우저로 열어보니 require 가 정의되지 않았다는 오류가 떴다.

const { agoraStatesDiscussions } = require('./data.js');

3. 시행착오

1. "type" : "module" 부분 제거하라.
   • 해당 오류를 검색하면 가장 많이 나오는 해결책이 package.json의 "type" : "module"을 제거하라는 거였다.
   • "type": "module"이라고 설정되어 있기 때문에 모듈 단위로 import/export 하는 문법만 이해할 수 있어서 생기는 에러라는 것.
   • 이 부분을 제거하거나 "type": "commonjs” 로 바꾸면 해결된고 한다.
   ❗하지만 내 package.json 에는 "type" : "module" 이 애초에 없었다…

4. 해결💡

• require & module.export 는 Node.js 문법이라 브라우저에서는 동작하지 않는다.
• es6 문법인 import & export로 해야 동작한다. 현재 웹팩 빌드 연습 중이라, 코드를 import & export로 바꾸지 않고 web 용으로 빌드 후 확인해 보았더니 에러가 사라졌다!
• 그런데 사실 이렇게 Node.js 문법인 require & module.exports로 사용하면, 브라우저로 화면 확인을 못하는 게 너무 불편하다.
• 노드 환경에서도 그냥 import & export 문법을 쓰고 싶다. 👉 이럴 경우, babel을 사용하면 된다.
• 바벨로 노드 환경에서 import & export 사용하기

5. 알게 된 것✨

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

• create-react-app으로 만든 앱에서는 require을 쓰든, import를 쓰든 상관이 없었다.
• → 왜냐? 이미 깔린 webpack 설정이 Node.js에서만 작동할 법한 코드를 모든 브라우저에서 잘 작동할 수 있도록 번들링 해주었기 때문이다!

👉 Node.js 에서의 모듈 불러오기 & 내보내기

//불러오기
require('./admin.js');
const foo = require('./admin.js');
const path = require('path')

//내보내기
module.exports = {};
exports.foo = {};

//exports = module.exports
//exports 는 property 방식으로 사용 
//-> exports = {} 로 쓰면, exports 가 그냥 변수가 된다.
//module.exports 는 바로 사용가능, property 도 당연 가능.

👉 자바스크립트 ES6에서의 모듈 불러오기 & 내보내기

• 모던 자바스크립트 모듈

//불러오기
import {admin} from './admin.js';
//내보내기
export admin
//변수,함수,객체 등 다 내보낼 수 있다.

//또는

//불러오기
import admin from './admin.js';
//내보내기
export default admin;