관련글
[TypeScript] TypeScript ESLint 개발환경을 구축하려고 하는데 'Require statement not part of import statement @typescript-eslint/no-var-requires' 에러가 났다

🧨 문제

---

• 프로젝트에 TypeScript를 사용하기 위해 TypeScript를 webpack과 통합하기 위해 환경설정을 했다. TypeScript컴파일러와 로더를 설치하고 설정 파일을 수정했다. 그리고 npm start를 커멘드라인에 실행했다. 그랬더니 아래와 같은 에러가 나왔다.

[webpack-cli] Failed to load '/Users/seon-yeong/work/project/everyday-with-you/webpack.config.js' config
[webpack-cli] /Users/seon-yeong/work/project/everyday-with-you/webpack.config.js:1
import path from 'path';
^^^^^^
// SyntaxError: 모듈 외부에서 import문을 사용할 수 없음
SyntaxError: Cannot use import statement outside a module

• 그리고 위 에러를 해결하고 나고 webpack을 다시 구동했더니, 아래와 같은 에러가 나왔다.

// ReferenceError: 모듈이 ES 모듈 범위에 정의되지 않음
ReferenceError: module is not defined in ES module scope

• 그리고 위 에러를 해결하고 나고 webpack을 다시 구동했더니, 아래와 같은 에러가 나왔다.

// ReferenceError: __dirname이 정의되지 않았습니다.
ReferenceError: __dirname is not defined

🤔 원인

---

• 에러가 나는 위치를 보니 webpack.config.js의 첫째줄이었다. 어제 아래와 같이 ES6스타일 최신구문으로 설정을 바꿔주면서 나타난 에러 같았다. 기존의 것은 commonJS(default)방식을 따르는 구문이었다.
  const path = require('path'); => import path from 'path';

• 그 다음의 에러는 ES6스타일 모듈구문을 따르게 되면서 webpack.config.js의 나머지 구문을 바꿔주지 않아서 나타난 것이었다.

• 그 다음의 에러도 마찬가지였다.

🙌 해결과정

---

• 우선 해당 에러를 검색했을때 가장 많이 나오는 해결방법인 package.json파일에 type: module태그를 추가했다.

• 아래를 참고해서 module.exports = config => export default config로 바꿔주었다.
  

• 아래를 참고해서 __dirname을 변수처리해주었다.
  

☑️ 참고

---

• Cannot use import statement outside a module Error 해결하기
• ReferenceError: module is not defined in ES module scope
• ReferenceError: __dirname is not defined