安装@apollo/client 后无法解析主模块字段

Posted 2023-02-16

【中文标题】安装@apollo/client 后无法解析主模块字段

【英文标题】：Main module field cannot be resolved after installing @apollo/client

【发布时间】：2022-01-01 09:32:58

【问题描述】：

我在安装 Apollo 后尝试运行我的 React Native Expo 应用程序时遇到了错误。我已经尝试删除节点模块并重新安装，重置缓存，重新启动计算机，但仍然没有成功。

android 捆绑失败 456 毫秒 尝试从文件 >/mnt/c/Users/14044/Desktop/Coding/divii/client/App.tsx 解析模块 @apollo/client 时，成功找到了包 >/mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/@apollo/client/package.json >。然而，这个包本身指定了一个 main 模块字段 > 无法解析 >(/mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/@apollo/client/main.cjs。事实上，这些文件都不存在：

/mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/@apollo/client/main.cjs(.native|.android.jsx|.native.jsx|.jsx|.android. js|.native.js|.js|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.json|.native.json|.json) /mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/@apollo/client/main.cjs/index(.native|.android.jsx|.native.jsx|.jsx|. android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.json|.native.json|.json )

【参考方案1】：

这是@apollo/client v3.5.4 和 RN metro bundler 之间的冲突。

作为解决此问题之前的解决方法，您可以通过在 React Native 项目的根目录中创建一个 metro.config.js 文件来配置 Metro，其中包含以下内容：

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

此解决方法已发布在 Apollo Github 发布页面上 here.

【讨论】：

没有解决问题

@LukAron 它为我解决了这个问题......它对你完全没有任何作用？甚至没有改变错误？

起初它对我不起作用，我更改了metro.config.js 并在我的模拟器上尝试了。同样的错误。但后来我关闭了地铁，然后重新打开，它起作用了！

【参考方案2】：

尝试降级到@apollo/client3.4.16。我刚刚进行了一轮软件包更新，3.5.4 也破坏了我的构建。我正在使用带有降级版本的graphql lib 的降级包——15.7.2。

这些是当前版本的 Expo / RN 对我有用的最后一个版本。

希望能帮到你！

【讨论】：

有效，但不能与***.com/a/70076278/10189759一起使用

不错！知道是什么导致了这个问题吗？

这就是诀窍。

【参考方案3】：

这是Apollo Client 最新版本（3.5.0 及更高版本）和Metro bundler 工作方式的问题。您需要通过在项目的根文件夹中创建 metro.config.js 来配置 Metro 以了解 @apollo/client 中使用的 .cjs 文件。

这是Apollo 版本page 上解决方案的链接。

我尝试了解决方案，它不起作用，错误已解决，但是项目中其他包的构建失败了，所以我尝试了类似但不同的方法

这是我的metro.config.js

const getDefaultConfig = require('metro-config');

module.exports = (async () => 
  const 
    resolver: sourceExts,
   = await getDefaultConfig();
  return 
    transformer: 
      getTransformOptions: async () => (
        transform: 
          experimentalImportSupport: false,
          inlineRequires: true,
        ,
      ),
    ,
    resolver: 
      sourceExts: [...sourceExts, 'cjs'],
    ,
  ;
)();