[vite] Rollup failed to resolve import react-icons

에러 상황

React 로컬에서 react-icons를 import 할 때 아래와 같이 작성해도 문제없이 사용 가능하다. 하지만 어딘가에서 Build 후 올릴 때 Rollup Build error가 나타난다.

import { MdSearch } from "react-icons/all";
import { MdSearch } from "react-icons/Md";

1. vercel deployment react-icons build error
2. docker build error

...
[18:00:00.935] `build.rollupOptions.external`[39m
[18:00:00.935] [31merror during build:
[18:00:00.936] Error: [vite]: Rollup failed to resolve import "react-icons/all" from "src/page/Search.jsx".
[18:00:00.936] This is most likely unintended because it can break your application at runtime.
[18:00:00.936] If you do want to externalize this module explicitly add it to
[18:00:00.936] `build.rollupOptions.external`
[18:00:00.936]     at onRollupWarning (/vercel/path0/node_modules/vite/dist/node/chunks/dep-40c65ceb.js:41797:19)
[18:00:00.937]     at onwarn (/vercel/path0/node_modules/vite/dist/node/chunks/dep-40c65ceb.js:41613:13)
[18:00:00.937]     at Object.onwarn (/vercel/path0/node_modules/rollup/dist/shared/rollup.js:23216:13)
[18:00:00.937]     at ModuleLoader.handleResolveId (/vercel/path0/node_modules/rollup/dist/shared/rollup.js:22466:26)
[18:00:00.937]     at /vercel/path0/node_modules/rollup/dist/shared/rollup.js:22427:26
[18:00:00.937]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)[39m
[18:00:00.956] error Command failed with exit code 1.
[18:00:00.957] info Visit <https://yarnpkg.com/en/docs/cli/run> for documentation about this command.
[18:00:00.982] Error: Command "yarn run build" exited with 1

해결 방안

1. all 접근이 아닌 해당 아이콘 폴더로 직접 접근
2. 대소문자 확인

import { MdSearch } from "react-icons/md";
import { RiBuilding4Fill} from "react-icons/ri";

보통 앞 2, 3글자의 구분자를 폴더 이름으로 사용하거나 react-icons 페이지에 아이콘 이름 앞에 명시되어 있으니 참고하면 된다.