9장) 파이어베이스 9버전 에러

[jungahzzzang]

안녕하세요. 아래와 같은 에러가 뜨는데요. 구글링 결과 파이어베이스 9버전 이상이면 문법이 달라진다고 해서 적용을 해보았는데 여전히 해결이 안 되고 있습니다 ㅠㅠ 확인 부탁드립니다. 제 깃주소도 첨부하겠습니다.

https://github.com/jungahzzzang/PJ_ReactNativeStudy/tree/main/JA/react-native-simple-chat

[jungahzzzang]

자문자답) 파이어베이스 기존 설치 버전 삭제하고 새로 깔았더니 에러가 바뀌었습니다...

삭제한 버전 : 9.6.7
새로 설치한 버전 : 9.6.11

[Alchemist85K]

안녕하세요 @jungahzzzang 님,

첫 번째 에러는 프로젝트 루트 경로에 metro.config.js 파일을 생성하고 다음과 같이 작성하면 해결할 수 있습니다.

const { getDefaultConfig } = require('@expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push('cjs');

module.exports = defaultConfig;

https://github.com/Alchemist85K/my-first-react-native/blob/main/chapter09/react-native-simple-chat/metro.config.js

즐거운 하루 되세요
감사합니다.

[Alchemist85K]

해결 되었다니 다행이네요. :)

에러 메시지를 보면 cjs 확장자를 보면서 발생한 에러인것을 알 수 있습니다.
metro에서는 js, ts, jsx, tsx, json 등의 파일만 사용하고 있어서 cjs도 추가한 것입니다.

this package itself specifies a main module field that could not be resolve (...node_modules/idb/build/index.cjs)

참고로 cjs는 Common JS의 약자입니다.
즐거운 하루 되세요
감사합니다.

[jungahzzzang]

그리고 답변 주신 김에 추가 질문 드려도 될까요..?ㅠㅠ경고랑 관련 없을 수도 있지만.. 아래와 같은 경고가 뜨면서 새로운 사진(로고, 회원가입 기본 이미지가 안 뜨고 로딩 화면은 정상적으로 뜸.)이 뜨지 않거든요.. expo go로 실행해서 기기로 바로 확인할 때에는 사진이 뜨는데 안드로이드 애뮬레이터로 실행 시에는 사진이 뜨지 않는데... 혹시 이 부분은 파이어베이스에 안드로이드 관련 규칙 추가가 필요한 걸까요...?

[Alchemist85K]

이 경고는 expo-app-loading이 deprecated 된다는 경고 메시지로 이미지가 나타나지 않는것과 관련이 없습니다.
로딩 화면 이미지는 프로젝트 로컬에 포함된 이미지를 사용하기 때문에 파이어베이스와 연관이 없습니다.

실물 기기에서 정상적으로 동작한다면 에뮬레이터에서도 정상적으로 동작해야 합니다.
특정 상황에 따라 에뮬레이터에서 정상동작 하지 않는 기능도 있지만, 책에 수록된 내용은 에뮬레이터에서도 문제 없이 동작하는 기능들입니다.
안드로이드 기기 혹은 가상 기기를 위한 규칙을 따로 설정하지는 않습니다.
파이어베이스 규칙을 다시 한 번 확인해 보시기 바랍니다.

혹은 실물 기기가 안드로이드 기기라면 캐시를 삭제하고 테스트를 다시 해보시기 바랍니다.

즐거운 하루 되세요
감사합니다.

[jungahzzzang]

제 규칙은 이거이구

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /logo.png {
    	allow read;
      }
    match /photo.png {
    	allow read;
    }
  }
}

images.js 입니다 ㅠㅠ 회사에서는 안드로이드애뮬레이터로, 집에서는 expo go로 테스트하고 있어서.. 집가서 다시 확인해보도록 하겠습니다! 감사합니다.

const prefix = 
    "https://firebasestorage.googleapis.com/v0/b/react-native-simple-chat-3ded8.appspot.com/o";

export const images = {
    logo: `${prefix}/logo.png?alt=media`,
    photo: `${prefix}/photo.png?alt=media`,
};

[Alchemist85K]

브라우저에서 이미지 주소로 이동하면 이미지가 잘 나타나네요.
권한 규칙도 잘 작성한 것으로 보입니다.
문제가 잘 해결되길 바랍니다.
감사합니다.