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



我正在尝试修改我的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属性的Array添加一个空字符串,但这并不能解决问题。

知道如何让这个Metro正确解析这个main.cjs文件吗?

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

我不确定这是否适用于您,但就我而言,我没有更改bundler配置中的任何内容。解决我的问题的是为watchmanreact native清除项目缓存。

# Clear watchman's cache
yarn watchman watch-del-all
# Clear react-native's cache
yarn react-native start --reset-cache

最新更新