React Native Metro 无法解析模块问题解决方案

第一段引用上面的摘要：

在使用 React Native 时，升级 Metro 版本后可能遇到无法解析模块的问题，例如 react-native-gesture-handler。本文提供了一种解决方案，通过修改 metro.config.js 文件，显式地将 json 添加到 resolver.sourceExts 中，从而解决 Metro 无法正确解析 package.json 文件导致的问题。

问题描述

在 React Native 项目中，升级 Metro 版本后，可能会遇到类似以下错误：

error: Error: Unable to resolve module react-native-gesture-handler from /path-to-project/index.js: react-native-gesture-handler could not be found within the project or in these directories:
node_modules
../node_modules
../../../../node_modules

即使 node_modules 目录下存在相应的模块，Metro 仍然无法解析。这通常发生在升级到 Metro v0.72.0 及更高版本之后。

问题原因

从 Metro v0.72.0 开始，.json 文件不再被隐式解析。这意味着如果 resolver.sourceExts 中没有包含 json，Metro 将无法正确读取 package.json 文件，从而导致模块解析失败。Metro 的解析算法会检查每个包的 package.json 文件，以确定入口文件（main 字段）。如果 Metro 无法读取 package.json，它就无法找到模块的正确路径。

解决方案

要解决这个问题，需要在 metro.config.js 文件中显式地将 json 添加到 resolver.sourceExts 中。

1. 找到 metro.config.js 文件： 该文件通常位于 React Native 项目的根目录下。如果不存在，则需要手动创建。

2. 修改 metro.config.js 文件： 打开 metro.config.js 文件，找到 resolver 属性。如果 resolver 属性不存在，则添加它。然后，在 resolver 属性中，找到 sourceExts 属性。将 json 添加到 sourceExts 数组中。

以下是一个示例 metro.config.js 文件：

// metro.config.js
module.exports = {
resolver: {
sourceExts: [
'jsx',
'js',
'ts',
'tsx',
'cjs',
'json' // 添加 json
]
},
};

注意： 确保将 json 添加到 sourceExts 数组中，而不是替换整个数组。如果 sourceExts 数组中已经存在其他扩展名，请保留它们。

3. 重启 Metro： 保存 metro.config.js 文件后，需要重启 Metro 才能使更改生效。可以运行以下命令来重启 Metro：

react-native start --reset-cache

这将清除 Metro 的缓存并重新启动服务器。

总结

通过将 json 添加到 metro.config.js 文件的 resolver.sourceExts 中，可以解决 Metro 无法解析模块的问题。这是因为 Metro v0.72.0 及更高版本不再隐式解析 .json 文件，需要显式地配置才能正确读取 package.json 文件。 如果遇到类似问题，请尝试此解决方案。 此外，在升级 React Native 和相关依赖项时，务必仔细阅读官方文档和发布说明，了解潜在的 breaking changes，以便及时解决可能出现的问题。