React Native配置webpack aliases后无法解析模块的问题如何解决

• 核心原因：jsconfig.json 的路径别名配置仅服务于VS Code等编辑器的代码提示、跳转校验逻辑，React Native 默认使用的Metro打包器并不会读取该文件的配置，因此打包阶段无法识别你定义的commons/*别名，直接抛出模块找不到的错误。
• 次要排查点：如果配置完打包器后仍然报错，可检查jsconfig.json中baseUrl、paths的相对路径是否和实际项目结构匹配。

可选两种实现方案，二选一即可：

方案1：直接配置Metro打包器别名（推荐） #

步骤1：修改metro配置文件 #

编辑项目根目录的metro.config.js，添加别名解析规则：
如果是RN 0.72及以上版本，使用官方推荐的合并配置写法：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {
  resolver: {
    alias: {
      // 路径对应项目根目录下的app/commons文件夹
      'commons': './app/commons',
    },
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

如果是旧版本RN，使用extraNodeModules配置：

const path = require('path');

module.exports = {
  resolver: {
    extraNodeModules: {
      'commons': path.resolve(__dirname, 'app/commons'),
    },
  },
  watchFolders: [path.resolve(__dirname, 'app')],
};

步骤2：清理缓存重启项目 #

配置完成后必须清理Metro缓存再启动，避免旧缓存导致配置不生效：

npx react-native start --reset-cache

方案2：通过Babel插件配置别名 #

如果项目有自定义Babel配置需求，可使用babel-plugin-module-resolver实现：

步骤1：安装插件 #

npm install babel-plugin-module-resolver --save-dev

步骤2：修改babel配置文件 #

编辑项目根目录的babel.config.js，添加插件配置：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['module-resolver', {
      root: ['.'],
      alias: {
        'commons': './app/commons',
      },
    }],
  ],
};

步骤3：清理缓存重启项目 #

和方案1一致，执行缓存清理命令后重启项目即可。

注意：原有jsconfig.json无需修改，保留即可正常使用编辑器的路径提示、自动补全功能。

内容的提问来源于stack exchange，提问作者Mohamed Ahmed