AWS Amplify에서 Module not found: Error: Can't resolve '@aws-amplify/ui-components' 에러

1. 배경 상황

회사에서 팀 과제 때문에 Amplify Workshop을 따라하고 있었는데 예제 코드에서 라이브러리와 관련된 각종 Dependency에러가 발생했었다. 구글링으로 어찌저찌 해결하긴 했지만 기록하지 않으면 금방 까먹을 것 같아(이미 꽤 까먹었다) 포스팅으로 남겨둔다. 과연 나중에 또 필요할지는 의문이지만….

참고로 Amplify에서 실습한 코드는 리액트(리액트 네이티브 아님)기반의 앱. 백엔드를 자동으로 생성해주는 Amplify 앱 특성상 백엔드 코드는 별도로 생성하지 않았다.

• 에러 1: AWS Amplify에서 Module not found: Error: Can't resolve '@aws-amplify/ui-components' 에러

에러 1: AWS Amplify에서 Module not found: Error: Can't resolve '@aws-amplify/ui-components' 에러

샘플 코드를 참고해 App.js를 작성하고 npm start 로 프로젝트를 시작하려 하니 아래와 같은 에러 메시지가 발생했다.

위 에러들은 amplify 관련 라이브러리 버전 때문에 발생한 에러였다. 실습 코드는 amplify 4버전대 이하를 기준으로 만들어진 코드인 듯 한데, 내가 설치한 amplify 라이브러리는 5버전대라 실습코드에서 사용하던 컴포넌트를 더 이상 지원하지 않아 에러가 발생했다.

라이브러리 버전을 변경해 다시 설치하기 위해 package.json 파일에서 amplify 라이브러리 및 문제가 되는 라이브러리의 버전을 변경해준다. 내 코드에서 문제가 됐던 라이브러리는 amplify와 ui-react, ui-component였다.

위와 같이 amplify 버전을 4.3.43, @aws-amplify/ui-components를 1.9.40, @aws-amplify/ui-react를 1.2.5버전으로 내려준다.

그 다음 node_module 디렉터리 및 package-lock.json 파일을 삭제하고, npm install 명령어를 실행해 라이브러리를 다시 설치해준다.

라이브러리 버전이 수정되었는지 확인하기 위해 아래 명령어를 실행해보자.

그러면 이제는 아래와 같은 에러만 남을 텐데, 이 에러는 Amplify 버전에 맞는 import 형식이 아니라 발생한 에러였다.

샘플 코드에서는 아래와 같은 형식으로 import가 되어있는데,

aws-amplify 4.3.43버전에서는 Amplify도 {} 으로 넣어줘야헀다.

이제 다시 npm start 로 로컬에서 프로젝트를 실행해보면 정상적으로 동작하는 것을 볼 수 있다.