문제 상황
./pages/0/index.js:3:0 Module not found: Can't resolve '@mui/icons-material/ArrowForwardIosSharp'
1 | import * as React from 'react';
2 | import { styled } from '@mui/material/styles'; >
3 | import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
4 | import MuiAccordion from '@mui/material/Accordion';
5 | import MuiAccordionSummary from '@mui/material/AccordionSummary';
6 | import MuiAccordionDetails from '@mui/material/AccordionDetails'; https://nextjs.org/docs/messages/module-not-found
아무리
npm install @material-ui/core을 해줘도
계속 모듈을 읽어오지 못했다.
확장자를 tsx, js 바꿔가며 해봐도 안된다.
구글링해봐도 잘 모르겠고
오히려 설치가 잘 안되기까지 했다.
up to date, audited 856 packages in 3s
122 packages are looking for funding
run `npm fund` for details
24 vulnerabilities (1 low, 8 moderate, 15 high)
To address all issues, run:
npm audit fix
Run `npm audit` for details.
하라는 대로 npm fund를 해봐도 npm audit를 해봐도
나중에 npm audit에 f자 같은게 붙은 무언가를 해봐도 결과는 마찬가지로 잘 되지 않았다.
해결
그래서 다시 차분히 살펴 보았다. 아하...
@mui/icons-material/ArrowForwardIosSharp 에
빨간 줄이 떴구나..?
일단 라이브러리 저장소인
node_modules로 간다.
거기서 @mui를 찾아본다. 있다.
icons-material를 찾아본다. 있다.
ArrowForwardIosSharp를 찾아본다. 없다.
그렇다면 ArrowForwardIosSharp이 제대로 설치가 안된 것이다.
그래서 다시 차분히
Material-UI 사이트로 들어가서
installation 부분을 살펴보았다.
https://mui.com/getting-started/installation/
Installation - MUI
Install MUI, the world's most popular React UI framework.
mui.com
yarn add @mui/icons-material
너무나도 잘 보이는 곳에 icons-material 쓸거면 저걸 다운 받으라고 명시되어 있다.
저걸 하고 나니...
드디어 해결됐다.
반성
쉽게 가려고 독스를 읽어보기 보다
다른 분들 블로그 대충 보고 대충 명령어 가져와서
실행 돌려보려던 나쁜 습관이 있었다.
이번 일로 독스의 중요성을 알게 되었다.
앞으로는 영어가 좀 답답하더라도 독스를 참고하여
코딩하는 습관을 길러야 겠다^오^
댓글