如何使用 Metro 的配置在解析文件时不查找扩展名？

Question

我正在尝试修改我的 Metro.config.js 文件，以便它不会忽略 npm 包的

main

模块。

这是我在运行时收到的错误消息：

error: Error: While trying to resolve module `@apollo/client` from file `<project-directory>/src/ApolloProvider.tsx`, the package `<project-directory>/node_modules/@apollo/client/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`<project-directory>/node_modules/@apollo/client/main.cjs`. Indeed, none of these files exist:

  * <project-directory>/node_modules/@apollo/client/main.cjs(.native|.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.|.native.|.|.ios.json|.native.json|.json)
  * <project-directory>/node_modules/@apollo/client/main.cjs/index(.native|.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.|.native.|.|.ios.json|.native.json|.json)
    at DependencyGraph.resolveDependency (<project-directory>/node_modules/metro/src/node-haste/DependencyGraph.js:311:17)
    at Object.resolve (<project-directory>/node_modules/metro/src/lib/transformHelpers.js:129:24)
    at resolve (<project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
    at <project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (<project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
    at processModule (<project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at addDependency (<project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
    at async Promise.all (index 3)

我可以清楚地看到

<project-directory>/node_modules/@apollo/client/main.cjs

存在，但解析器似乎总是尝试附加扩展名（而上述

main.cjs

文件不需要扩展名）。

以下是我的

metro.config.js

文件：

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

如您所见，我尝试将空字符串添加到

sourceExts

属性的数组中，但这并不能解决问题。

知道如何让 Metro 正确解析此

main.cjs

文件吗？

Answer 1

我最近遇到了这个错误，并尝试了相同的解决方案但没有成功。它不起作用的原因是 Metro 仍会查找名为

/path/to/file.js

的文件并附加

.

，后跟配置数组中定义的扩展名。即使它是空的，它仍然会附加一个

.

。

我不确定这是否适合您，但就我而言，我没有更改捆绑器配置中的任何内容。解决我的问题的是清除 watchman 和 react-native 的项目缓存。