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

【问题标题】：How to use Metro's config to not look for extension when resolving a file?解析文件时如何使用 Metro 的配置不查找扩展名？
【发布时间】：2021-12-01 04:39:38
【问题描述】：

我正在尝试修改我的 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 文件吗？

【问题讨论】：

标签： javascript typescript react-native metro-bundler

【解决方案1】：

我最近遇到了这个错误并尝试了相同的解决方案但没有成功。它不起作用的原因是 Metro 仍会查找名为 /path/to/file.js 的文件并附加 . 后跟配置数组中定义的扩展名。即使它是空的，它仍然会附加一个.。

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

# Clear watchman's cache
yarn watchman watch-del-all

# Clear react-native's cache
yarn react-native start --reset-cache

【讨论】：