[material-ui] ~~~ was not found in '@mui/material' 오류와 import level

  개발 중 material-ui v5를 사용할 때 자꾸 import 단에서 오류가 났습니다. 분명 yarn add로 material-ui를 설치했는데 자꾸 Box나 Grid 같은 컴포넌트를 불러올 수가 없다는 것입니다. 혹시 import 문제가 발생했다면 참고해주길 바랍니다!

 

---

import { Tabs } from '@mui/material'; //OK: 1st level import

import Tabs from '@mui/material/Tabs'; //OK: 2nd level import

import TabIndicator from '@mui/material/Tabs/TabIndicator'; //Error 3rd level import

import Tabs from '@mui/material'; //Error

첫번째와 두번째 방식만 가능하고, 세번째와 네번째에서는 에러가 발생합니다. 두 에러는 발생 이유가 다릅니다.

---

왜 TabIndicator만 import하면 안될까?

  

  mui에서는 1st level import와 2nd level import만을 지원하기 때문입니다. 즉, 문법이 틀린 것이 아니라 저 import를 material-ui에서 지원하지 않습니다. 따라서, TabIndicator 같이 material 아래의 모듈을 import하고 싶다면, 2nd level에서 import해야할 것입니다. 실제로 저 TabsIndicator만 따로 쓸일이 있을까싶네요...

 

---

왜 중괄호를 안쓰면 안될까?

 

이건 라이브러리에서 export 해주는 방식에 의한 차이이다. 

//material-ui.js

const a = 1;
const b = 2;

export { a };
export default b;

실제 파일이 저렇지는 않지만, 대충 저렇게 export 해주는 파일이 있다고 합시다. 우리는 해당 파일의 변수를 어떻게 import 해야할까요?

 

import num, { a } from '../material-ui'
console.log(a, num); // 1, 2

  위와 같이 import하면 됩니다. 엥 num은 material-ui 파일에서 export 해주지 않았는데요? 이는 default로 export해준 경우 import num같이 괄호를 사용하지 않아도 바로바로 export default인 값을 받아오기 때문입니다. default의 의미를 생각하면 어쩌면 당연한 부분이죠. 명심할 점은, default가 아닌 것을 import하려면 {} 중괄호 안에 꼭 써줘야합니다.

  

  평소에 항상 무의식적으로 default를 써줘서 사실 중괄호 쓸 일이 많이 없었고, 라이브러리의 경우 웬만하면 Webstrom IDE에서 자동으로 중괄호를 쳐줘서 어쩔땐 쳐지고 어쩔땐 그냥 import하는지 궁금했는데, 이러한 이유가 있었습니다.

 

따라서 material-ui는 '@mui/material'에는 각 모듈을 그냥 export해주고 있고, 상세 주소로 들어가면 default로 export해주고 있음을 알 수 있습니다. '@mui/material'은 상위 디렉토리기 때문에 어떤 한 모듈을 default로 export하지 않겠죠?

 

./material/Accordion과 ./material 파일

위와 같이 Accordion의 default export를 material-ui에서 접근한 경우 그냥 export가 되고, ./Accordion까지 접근한 경우 export default로 export되기 때문에 중괄호가 필요없다는 것을 확인할 수 있었습니다.

 

추가로, 왜 TabsIndicator같은 3rd level import가 안되냐? 하면 그냥 export 해주는 코드가 없습니다. 따로 빼서 쓰는 건 material-ui의 목적에 그렇게 부합하지도 않을 것 같고요. 그냥 Tabs에 있는 변수정도로 생각됩니다.

 

---

그렇다면 어떻게 import해야 좋을까요? 요건 번들 사이즈와 tree-shaking에 대해서 다룰 때 같이 다뤄보겠습니다.

 

참고자료

 

https://github.com/mui/material-ui 공식 깃헙주소

https://mui.com/material-ui/guides/minimizing-bundle-size/ 공식문서

https://codingmania.tistory.com/333