bug / #1 / require is not defined

[youngseo-kangg]

Message

• 기본적으로 세팅해 둔 webpack.config.js가 작동되다가 환경변수 적용을 위해 webpack-dotenv를 설치 후 작성하고 적용하니 require is not defined라는 에러가 나왔음.
• 일단 처음엔 webpack-dotenv를 설치해 문제가 시작되었으니, 이 라이브러리와 관련된 부분에 문제가 있을 것이라고 예측했음.
  • 여러 해결책을 구글링 해 보고 적용해보아도 계속해서 새로운 에러를 만들어 내서 처음에 어느 부분에서 에러가 시작되는지를 파악하는데 시간을 쏟았음.

Error

1. package.json의 모듈 지정

• ReferenceError: require is not defined라는 글을 참고했더니, package.json파일에서 type:module을 제거해주면 된다는 해결책을 찾을 수 있었다.
• 하지만 내가 작성한 package.json에는 type:module이 없는 상태여서 위 해결책은 아닌 듯 했다.

2. commonjs 방식과 ES6방식의 모듈 차이

• Client on Node.js: Uncaught ReferenceError: require is not defined를 참고했었다. 위 글에서는 ...

    ... This is because require() does not exist in the browser/client-side JavaScript
  

    ...require키워드는 브라우저나 클라이언트 쪽에서 쓰이는 js에서는 존재하지 않기 때문입니다.
  

  ... 라고 이유를 설명하고 있었다.
• require키워드는 commonJS, import키워드는 ES6에서 지정한 모듈을 가져오는 방식인데, 중간에 혹시 잘못된 키워드를 가져왔나 해서 한번은 모든 키워드를 require로, 한번은 모든 키워드를 import로 바꿔 보았는데 여전히 같은 에러가 나오고 있었다.

3. babel 관련

• 뭔가 webpack과 관련된 에러이지 않을까 하고 webpack 레포지토리에서 검색해보니 webpack-cli ReferenceError: require is not defined라는 글을 발견했다.

  ... So I removed type:module stating that all my code base including the webpack configuration files
   should be treated as Common JS. Then I used babel to transpile my ES6 import statements of my 
  actual source (not the webpack config since its already written in common JS) into common JS 
  and that resolved all the issue. 
  

  ... 그래서 저는 webpack 설정 파일을 포함한 모든 저의 코드에서 CommonJS로 취급 될 것이라고 선언하는 type:module을
   모두 삭제했습니다. 그리고 나서 저의 실제 소스코드의 ES6 import 선언문을 트랜스파일하기 위해 바벨을 사용했고 (이미 
  commonJS를 사용하는 webpack config파일은 제외), 이는 모든 에러를 없애주었습니다.
  

• 위 글을 보고 나서 webpack에 바벨을 적용하는 부분을 추가해 주었음.

Solution

• 따지고 보면 여러가지 복합적인 이유가 있었다. css에서 png를 사용하고 있었는데, 이 png를 컴파일 해줄 loader를 설정해주지 않고 있었다. 그리고 난 후에 Error #3의 솔루션을 적용했더니 문제 없이 작동되었다.