리액트 네이티브번들링 실패오류 메시지: "모듈 'idb' 해결 중.....실제로 이러한 파일은 존재하지 않습니다.

리액트 네이티브번들링 실패오류 메시지: "모듈 'idb' 해결 중.....실제로 이러한 파일은 존재하지 않습니다.

문제의 오류 메시지:

" " " 를 할 때idb 「」에서C:\Users\OG\Desktop\programming\react_native\mealstogo\MealsToGo2\node_modules\@firebase\app\dist\esm\index.esm2017.js, " " "C:\Users\OG\Desktop\programming\react_native\mealstogo\MealsToGo2\node_modules\idb\package.json를 찾았습니다. 이 에는 ", " "가 지정되어 있습니다.main수 ('')C:\Users\OG\Desktop\programming\react_native\mealstogo\MealsToGo2\node_modules\idb\build\index.cjs실제로 다음 파일은 존재하지 않습니다.

오류 메시지 사진

이 오류의 혼란스러운 부분은 index.esm2017 파일이 실제로 디렉토리에 존재한다는 것입니다.'C:\사용자\'OG\데스크탑\programming\react_native\mealstogo\MiacesToGo2\node_modules\idb\build\index.cjs'

파이어베이스를 제거하고 다시 설치했습니다.'idb'를 설치 및 제거했습니다.watchman 캐시를 클리어하고 watchman 캐시를 클리어하여 node_modules를 삭제하고 재설치하였습니다.파일 디렉토리가 실제로는 에러 메세지에 표시되지 않는 것을 3회 확인했습니다.

이 에러는 expo에서 lottie-react-native를 설치할 때 발생했지만 관련이 없는 것으로 보이며 lottie-react-native를 삭제해도 문제가 해결되지 않았습니다.git을 사용하여 코드를 동작 개시 전으로 되돌리고 있는데, 여기서도 문제가 지속되고 있습니다.

이제 프로젝트 전체가 엉망이 된 것 같은데 어떻게 진행하면 좋을까요?

expo를 사용하는 경우 이 문제를 해결하려면 프로젝트 루트에 metro.config.js 파일을 만듭니다.파일에 파일 확장자를 추가합니다.cjs.상세

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

const defaultConfig = getDefaultConfig(__dirname);

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

module.exports = defaultConfig;

스크린샷

React Native CLI

const { getDefaultConfig } = require("metro-config");
const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues();
exports.resolver = {
  ...defaultResolver,
  sourceExts: [
    ...defaultResolver.sourceExts,
    "cjs",
  ],
};

같은 에러가 표시됩니다.새로운 파이어베이스 버전이 좀 웃긴 것 같아.파이어베이스 버전을 9.6.11로 다운그레이드하여 문제를 일시적으로 해결했습니다.

npm uninstall firebase
npm install firebase@9.6.11

에 다음 했습니다.metro.config.js Firebase . 파이어베이스 v9.8.1.

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  //added this
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs'],
  },
};

expo에서 이 문제를 해결하기 위해 몇 가지 시도를 했습니다.솔루션은 루트 디렉토리에 metro.config.js 파일을 작성하고 다음 코드를 추가합니다.

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

const defaultConfig = getDefaultConfig(__dirname);

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

module.exports = defaultConfig;

엑스포 앱을 다시 시작합니다!!

메트로 번들러를 재기동한 후에 동작하는 것을 발견했습니다.https://github.com/thysultan/stylis/issues/233

Expo에서는 app.json 파일을 변경해야 합니다.

{
  "expo": {
    ..., 
    "packagerOpts": {
      "sourceExts": ["cjs"]
    }
}

방금 이 명령을 설치했습니다. FireBase 버전이 자동으로 다운그레이드되어 문제가 해결됩니다.

expo install firebase@9.6.11

저는 리액트 네이티브 프로젝트(엑스포 없음)가 있고, 같은 에러가 발생했는데, 제 경우 파이어베이스 9.7.0이었는데, 이 스레드의 버디 어퍼와 같이 9.6.11로 변경해서 작동합니다.저는 실 설치 후 npx 포드 설치 후 노드 모듈을 만듭니다.이것은 제 소포입니다.전후 json (방화기지가 변경된 지 얼마 안 됨)

그 후:

"dependencies": {
"@react-navigation/native": "^6.0.10",
"@react-navigation/stack": "^6.2.1",
"axios": "^0.27.2",
"firebase": "9.7.0",
"react": "17.0.2",
"react-native": "0.68.1",
"react-native-gesture-handler": "^2.4.1",
"react-native-safe-area-context": "^4.2.5",
"react-native-screens": "^3.13.1"

},

이전: (작동 가능):

"dependencies": {
"@react-navigation/native": "^6.0.10",
"@react-navigation/stack": "^6.2.1",
"axios": "^0.27.2",
"firebase": "9.6.11",
"react": "17.0.2",
"react-native": "0.68.1",
"react-native-gesture-handler": "^2.4.1",
"react-native-safe-area-context": "^4.2.5",
"react-native-screens": "^3.13.1"

},

1시간의 조사 끝에 해결책을 찾았습니다.이 에러는, 잘못되어 있습니다.authDomain파이어베이스 구성으로 되어 있습니다.

구식:

authDomain: "https://something.firebaseio.com"

수정:

authDomain: "something.firebaseio.com"

이것이 누군가에게 도움이 되기를 바랍니다!

메모: 이것은 효과적이거나 권장되는 수정이 아닙니다.빠르고 지저분할 뿐이지

문제가 계속 발생하여 단기적인 수정이 필요한 경우 다음 페이지로 이동할 수 있습니다.idb폴더 안에 있는 폴더 안에 있는 폴더node_modules폴더, 액세스package.json파일 및 파일 형식 변경cjs로.js.

node_modules --> idb --> package.json --> change any 'cjs' to 'js'

다시 말하지만, 이것은 최선의 해결책이 아닙니다.그냥 테이프로 고정하는 거야

클린 엑스포 프로젝트에서 파이어베이스를 추가했는데도 똑같은 문제가 발생.이 문제는 엑스포에서 지원되지 않는 .cjs로 인해 발생합니다.

cjs를 metro.config.http://https://github.com/thysultan/stylis/issues/233#issuecomment-1000648356 에 추가하여 수정했습니다.

언급URL : https://stackoverflow.com/questions/72179070/react-native-bundling-failure-error-message-while-trying-to-resolve-module-i