[TIL] webpack, eslint, tsconfig 설정 시 에러

오늘은 웹팩을 이용한 환경설정을 해보았다. 부드럽게 되나 했더니 곳곳에서 에러가 터져 나왔다. 

 

1.Module not found: Error: Can't resolve './Header' in 'C:\\Users\\frontend\\webpack\\react-webpack\\src'

tsx 컴포넌트를 만들어 import하여 사용하려는데 프로젝트를 실행시킬때 해당 에러가 나타났다. 

webpack config에서 resolve 설정을 해주어 해결할 수 있었다.

resolve:{
  extensions: ['.ts','.tsx','.js']
},

 

2.linebreacker error

코드가 끝나는 부분마다 에러 표시가 나타났다. linebreak 설정과 관련된 에러였다. 아래 설정을 통해 해결할 수 있었다.  

"linebreak-style": [0, "windows"]

3.no-path-concat

__dirname+'/build' webpack.config 파일의 output 설정 부분에서 발생한 에러이다. 

https://eslint.org/docs/rules/no-path-concat 린트 문서의 예시를 보면 아래와 같이 나와있다. 하지만 __ 이걸 빼고 적었을 때 에러는 사라졌지만 빌드를 실행 하면 dirname은 없는 명령어라는 에러가 발생했다. 그래서 그냥 __dirname이 있을 필요도 없어서 지워버렸다. 

var fullPath = __filename + "/foo.js"; // incorrect

var fullPath = dirname + "/foo.js"; // correct

4.no-unused-var

1) eslintrc 파일 extends에 작성 'plugin:react/recommended'

 2) 또는 rules에 아래 값 추가 'no-unused-vars': 0

 

5.import error 나의 경우에서는 "element-clone 을 가져올수 없다" 와 같은 에러가 발생

esModuleInterop: true 로 해결

esModuleInterop 속성이 위의 코드 처럼 true로 설정될 경우, ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있게 된다.

 

6.prettier setting.json 설정

"prettier.eslintIntegration": true // deprecate 됨