eslint를 추가한 뒤 styled-component에서 에러가 발생했다.

기존에 사용하는 eslint에 몇가지를 변경해주었다. 그러자 갑자기 에러가 발생하기 시작했다.

나는 공부하면서 문법관련해서 에러가 나서 원인을 찾아보면 결국 오타 혹은 잘못된 문법으로 인해 에러가 발생하곤 했다. 

그래서 이러한 과정을 지나고 나면 뭔가 뿌듯하고 뭐라도 해낸것처럼 기분이 좋아지고는 했다. 

하지만 외부 라이브러리에서 에러가 발생하는 순간 나는 멘붕에 빠지곤 했다. 

그러한 이유는 외부 라이브러리를 사용하는 것도 헷갈리고 어려운데 거기다가 위와같은 에러까지 발생해버리면 나는 어떻게 해야할지 방황하기 시작한다.

이번에도 역시 똑같았다. 하지만 이번에는 나 혼자서 끝까지 찾아보기로 결심을 했다.

발생

기존에 사용하던 eslint파일을 보면 룰도 없었고, import, react,react-hooks 이렇게 3가지만 검사해줬다. 

그래서 babel-eslint, eslint-config-airbnb를 설치한 뒤 파일을 실행시켰다. 

그러자 위에서 본 사진과 같은 에러가 발생했다. 

구글링

먼저 나는 구글과 Stack Overflow에 styled-components webpack imported module 3 is not a function과 Webpack Imported Module is not a function 를 검색해 몇가지 자료를 찾아보았다.

모두 똑같은 에러는 아니였지만 공통적으로 파일을 import, export 할 때 경로를 정확하게 선언해줬다.

그래서 나는 node_modules에서 styled-component를 export 해주는 파일을 찾고자 하였다.

그결과 dist/styled-component.js에서 파일을 export해주는 것 같아 경로를 아래처럼 바꿔줬다.

import styled from 'styled-components'

import styled from 'styled-components/dist/styled-components'

결과

일단 다행히 해결되었다. 

하지만 vscode상에서 권고하는 문구가 뜨기 시작했다. 

일단 급한 불은 해결했으니 이 문제도 해결해야할 하나의 과제로 남게되었다.