React-Native打包失败。错误信息：“尝试解析模块'idb'时......实际上这些文件都不存在”。

Question

问题中的错误信息：

在尝试从文件C:\Users\OG\Desktop\programming\react_native\mealstogo\MealsToGo2\node_modules\@firebase\app\dist\esm\index.esm2017.js解析模块idb时，成功找到了包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:\Users\OG\Desktop\programming\react_native\mealstogo\MealsToGo2\node_modules\idb\build\index.cjs'

我已经卸载和重新安装了firebase。我已经安装和卸载了'idb'。我已经清除了yarn缓存、expo缓存、删除了node_modules并重新安装了它们，以及清除了watchman缓存，但都没有用。我还三次确认了文件目录的确在错误消息所说的位置。

当安装lottie-react-native时出现了错误，但似乎与之无关。即使删除lottie-react-native，问题仍然存在。我使用git将代码还原到行为开始之前，但问题仍然存在。

整个项目似乎已经毁了，该如何继续进行。

- JohnyClash

Answer 1

如果您使用的是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 命令行接口

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

- Sohel Islam Imran

---

问题实际上是与 Expo 有关，而不是 Firebase 吗？ - JohnyClash

@JohnyClash 实际上，Firebase 使用的是 .cjs 文件扩展名，这在 Expo 或 React Native 中默认不支持。因此，我们需要手动配置 metro.config 来解析它。请在此阅读详细信息。 - Sohel Islam Imran

FYI，在此之后我不得不重新安装 node_modules 才最终使其工作。 - geg

这对我很有效。非常感谢。这是一个React Native项目，所以我只需将第二段代码粘贴到名为metro.config.js的根目录新文件中即可。 - user2364424

没问题，这对我也起作用了。在使用Expo进行Android构建时遇到了相同的错误。 - Ryan Trainor

Answer 2

我遇到了同样的错误...我认为新版Firebase可能有些问题。我将Firebase版本降级到9.6.11来临时解决这个问题...

npm uninstall firebase
npm install firebase@9.6.11

- crunchytoast

---

你是一个伟大的程序员。 - Abdel Shokair

这段代码对我来说在使用react-native-cli和yarn时有效，但是请记住，如果在iOS上操作，请执行npx pod-install ios。 - Marco Sajeva

我不得不从v9.12降级到这个版本。谢谢！ - benwl

Answer 3

我刚在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'],
  },
};

- EdEd

---

这对我来说解决了错误，而且是唯一有效的方法，因为在某些情况下，当Metro引导时，getDefaultConfig未定义。但是我注意到我的默认设置在node_modules/metro-config/src/defaults/defaults.js中为["js", "json", "ts", "tsx"]，所以我将其改为["js", "json", "ts", "tsx", "cjs"]。 - scipilot

这与我所做的类似，但sourceExts: [...sourceExts, 'cjs']更加简洁，因为你只需要读取现有的扩展名并添加cjs用于Firestore。 - undefined

Answer 4

我尝试了几种方法来解决 Expo 中的问题，对我而言，解决方案是在根目录中创建 metro.config.js 文件并添加以下代码；

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

const defaultConfig = getDefaultConfig(__dirname);

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

module.exports = defaultConfig;

现在重新启动您的 Expo 应用程序！

- Diven Khatri

Answer 5

在重启metro bundler后，找到了这个有效的解决方法：https://github.com/thysultan/stylis/issues/233

对于Expo，您需要更改您的app.json文件：

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

- Sharmaine Teo

Answer 6

我刚刚安装了这个命令，它会自动降级你的Firebase版本并解决问题。

expo install firebase@9.6.11

- Akhzar Nazir

Answer 7

我有一个 react-native 项目（没有 expo），遇到了同样的错误，在我的情况下，我使用的是 firebase 9.7.0，但我像这个帖子中的伙伴一样改成了 9.6.11，然后它就可以工作了。 我使用 yarn install 构建了 node 模块，并在之后运行了 npx pod-install。 这是我的 package.json 在改变 firebase 之前和之后的样子：

之后：

"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"

},

- user10415531

Answer 8

经过1小时的研究，我找到了解决办法。我之所以出现这个错误，是因为在firebase配置中authDomain错误。

旧的：

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

修复后：

authDomain: "something.firebaseio.com"

希望这能帮助到某些人！

- Lê Vũ Huy

Answer 9

注意：这不是一种高效或推荐的修复方法，只是快速而粗略的。

如果您一直遇到问题并需要短期解决方案，则可以导航到node_modules文件夹中的idb文件夹，访问package.json文件，并将任何以cjs结尾的文件类型更改为js。

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

再次强调，这不是最好的解决方案，只是一个临时性的解决办法。

- Josh

Answer 10

即使在一个干净的expo项目中添加firebase后，仍然遇到完全相同的问题。这个问题是由于Expo不支持 .cjs文件引起的。

我通过按照此处所述的方法将 cjs 添加到 metro.config.js 中进行了修复：https://github.com/thysultan/stylis/issues/233#issuecomment-1000648356

- hsinyuu

---

我尝试的最后一件事是降级Firebase版本，正如@crunchtoast建议的那样。我还没有实验和发现这个答案是否有效。 - JohnyClash

我尝试在metro.config文件中添加cjs解析器，但对我来说没有修复它... metro仍然无法识别文件... 我认为最终这是一个firebase问题，因为他们几天前刚刚添加了idb作为依赖项。 - crunchytoast