inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)

EncryptedStorage import 오류가 발생합니다.

해결된 질문

550

popo

작성한 질문수 6

1

환경:

 

문제:

  1. 아래 명령어로 라이브러리 설치 및 pod install 과정은 모두 완료한 상태입니다. 


    $ yarn add react-native-encrypted-storage
    $ npx pod-install ios


  2. /frontend/utils/encryptStorage.ts에서 EncryptStorage 라이브러리를 불러올 때 다음과 같은 경로로 불러와집니다. 자동완성 기준으로 불러왔으며, 라이브러리 삭제 후 재설치해도 현상은 같습니다.

     import EncryptedStorage from 'react-native-encrypted-storage/lib/typescript/EncryptedStorage';

     

  3. 이 경로로 importing된 라이브러리를 파일 내에서 사용하면 정상적으로 메서드가 자동완성 됩니다. (따라서 코딩할 때에는 문제가 되는지 몰랐습니다)


  4. 이 코드를 바탕으로 앱 실행 시 react-native-encrypted-storage모듈을 불러올 수 없다는 오류가 발생합니다.


    error: 
    Error: Unable to resolve module react-native-encrypted-storage/lib/typescript/EncryptedStorage from /Users/popo/Desktop/ClipProjects/frontend/src/utils/encryptStorage.ts:
    react-native-encrypted-storage/lib/typescript/EncryptedStorage could not be found within the project or in these directories: node_modules 
    
    1 | import EncryptedStorage from 'react-native-encrypted-storage/lib/typescript/EncryptedStorage'; 
      |                               ^ 
    2 | 
    3 | const setEncryptedStorage = async <T>(key: string, value: T) => { 
    4 | await EncryptedStorage.setItem(key, JSON.stringify(value));

     

  5. 해당 모듈 외 문제는 없는 상황 같습니다. 서버 연결 및 응답(로그인, 회원가입에 대해)은 잘 됩니다.

 

시도해본 것:

import EncryptedStorage from 'react-native-encrypted-storage/lib/typescript/EncryptedStorage';

import EncryptedStorage from 'react-native-encrypted-storage'; 로 바꿔 실행해봤는데, 컴파일 오류는 발생하지 않고 로그인 및 회원가입 시점에 eject가 발생합니다.

 

질문: 왜 이런 문제가 발생하는 것이며, 어떻게 해결할 수 있을까요?

react-native typescript nestjs react-query zustand

답변 1

0

Kyo

eject이 발생한다는게 무슨말씀이신가요?

react-native-encrypted-storage

로 임포트하시고 앱을 삭제하고 다시 빌드해보시겠어요?

0

popo

eject가 아니고 reject입니다 죄송합니다!

알려주신 방법을 시도해봤지만, 해당 방법으로 앱 실행 시 Promise rejection이 발생합니다.

import EncryptedStorage from 'react-native-encrypted-storage/';

const setEncryptedStorage = async <T>(key: string, value: T) => {
  await EncryptedStorage.setItem(key, JSON.stringify(value));
};

const getEncryptedStorage = async (key: string) => {
  const value = await EncryptedStorage.getItem(key);
  return value ? JSON.parse(value) : null;
};

const removeEncryptedStorage = async (key: string) => {
  const value = await EncryptedStorage.getItem(key);
  if (value) {
    await EncryptedStorage.removeItem(key);
  }
};

export {setEncryptedStorage, getEncryptedStorage, removeEncryptedStorage};

EncryptedStorage를 절대 경로로 import 했고, 이 코드를 기반으로 앱을 실행하면 컴파일 에러는 발생하지는 않습니다.

단, EcryptedStorage를 사용하는 코드가 실행되면 promise reject 및 storage 저장이 실행되지 않습니다. 아래 사진은 회원가입된 계정으로 로그인 시 removeItem 메서드에 대한 Promise reject 에러입니다.

즉,

  1. import EncryptedStorage from 'react-native-encrypted-storage/';로 라이브러리를 불러오면 앱 실행 자체는 되지만(컴파일 에러 발생 X), EncryptedStorage 메서드를 사용하는 트리거(로그인) 발생 시 Promise reject가 발생하며 해당 라이브러리가 제대로 작동하지 않습니다.

  2. import EncryptedStorage from 'react-native-encrypted-storage/lib/typescript/EncryptedStorage';로 import 하면(import문 입력 시 자동완성에 해당 경로밖에 없습니다) 앱 실행 시 컴파일 에러가 발생하면서 실행 자체가 되지 않습니다.


    Unable to resolve module react-native-encrypted-storage/lib/typescript/EncryptedStorage from /Users/popo/Desktop/ClipProjects/frontend/src/utils/encryptStorage.ts: react-native-encrypted-storage/lib/typescript/EncryptedStorage could not be found within the project or in these directories:
      node_modules
    > 1 | import EncryptedStorage from 'react-native-encrypted-storage/lib/typescript/EncryptedStorage';
        |                               ^
      2 |
      3 | const setEncryptedStorage = async <T>(key: string, value: T) => {
      4 |   await EncryptedStorage.setItem(key, JSON.stringify(value));
    
    RCTFatal
    __28-[RCTCxxBridge handleError:]_block_invoke
    _dispatch_call_block_and_release
    _dispatch_client_callout
    _dispatch_main_queue_drain
    _dispatch_main_queue_callback_4CF
    __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
    __CFRunLoopRun
    CFRunLoopRunSpecific
    GSEventRunModal
    -[UIApplication _run]
    UIApplicationMain
    main
    start_sim
    0x0
    0x0
    

     

0

Kyo

앱을 지우고 다시 빌드해도 동일한 에러가 발생하나요? 그리고 스토리지 유틸함수 사용처에서는 어떻게 사용하고있나요?

1

popo

깃헙에 제공해주시는 코드 보고 리팩토링 했더니 해결이 됐습니다. 강의 보면서 함수명이라든가 조금 바꿔서 진행하다보니 syntax error가 발생했던 거 같습니다 답변 감사합니다!

0

Kyo

해결되어다행입니다!!👍👍

react-native-screens 버전 호환 문제

2

153

1

안드로이드 실행 중 Drawer네비게이션과 MapView 성능 문제

0

103

2

해당 강의 부분은 실제 활용하기에 부족해 제가 해결한 방법입니다.

0

96

1

소스코드가 강의 순서랑 다른가요?

0

72

2

현재 Windows에서 VsCode로 작업 중인데 추후에 IOS도 가능하게 하려면

0

115

2

react-native-fast-image는 react 19 버전에서 설치가 안되나요?

0

209

2

SQL Shell의 역할이 무엇인가요?

0

91

1

혹시 해당 강의에서invalidateQueries를 사용한 이유가 있을까요?

0

79

2

빠르게 실행해보고싶습니다.

0

82

1

강의 수강 순서 관련

0

70

1

애뮬레이터 실행 방법

0

99

2

무료 Apple ID로 실기기 테스트 가능한가요?

0

90

2

ios 실기기 연결

0

70

2

npm run ios에러

0

74

1

10월 삭제 예정인 강의는 이유를 알 수 있을까요?

0

101

1

캘린더 개발 후에 navigation 에 대해서 궁금한 점이 있습니다.

0

51

1

안드로이드 위치 권한 이슈 2가지 문의

0

71

1

지도가 보이려면 음.. 작성해주신 스타일과 다르게

0

74

0

제대로 설치한거같은데 안드로이드랑 ios 둘다 앱실행이 안되는것같아요

0

83

3

강의 내용을 보면 전체적으로 function 함수 키워드를 사용하시는데

0

69

2

강의 3-9 에서 useGetRefreshToken 훅 안에 즉시 함수로 처리하는 이유가 궁금합니다!

0

82

2

사내에서 figma.com 업로드 안되나요?

0

96

1

AWS EC2 + RDS 설정

0

85

2

안드로이드 안켜집니다.

0

91

2