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

Question

我在尝试运行我的 React Native Expo 应用程序时安装 Apollo 后遇到错误。我尝试过删除节点模块并重新安装，重置html" target="_blank">缓存，重新启动计算机，但仍然没有运气。

Android 捆绑失败 456 毫秒 尝试从文件解析模块@apollo/客户端

< Li >/mnt/c/Users/14044/Desktop/Coding/divi/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) < Li >/mnt/c/Users/14044/Desktop/Coding/divi/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)

Answer 1

尝试降级到< code > @ Apollo/client < code > 3 . 4 . 16 。我刚刚做了一轮包更新，而< code>3.5.4也破坏了我的构建。我使用的是降级版的包以及降级版的< code > graph QL lib-< code > 15 . 7 . 2 。

这些是对我来说适用于Expo / RN当前版本的最后版本。

希望这能帮到你！

Answer 2

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

以下是阿波罗发布页面上的解决方案链接。

我尝试了这个解决方案，它不起作用，错误被解决了，但是项目中的其他包的构建中断了，所以我尝试了一种类似但不同的方法

这是我的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'],
    },
  };
})();

Answer 3

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

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

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

此解决方法发布在Apollo Github发布页面上。