React Native项目内符号链接模块导入失败问题求助

问题背景 #

文件结构 #

• frontend/app-core/services/ApiGateway.ts：需要导入React Native项目文件的目标文件
• frontend/react-native-app/services：指向上述文件的符号链接
• frontend/react-native-app/screens/Auth/tokenStorage.ts：需被ApiGateway.ts导入的文件

报错现象 #

1. 使用别名导入时
   执行代码import { retrieveTokenSecurely } from '@screens/Auth/tokenStorage';，报错提示找不到指定文件，Metro调用栈：

at ModuleResolver.resolveDependency (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:112:15)
at DependencyGraph.resolveDependency (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/node-haste/DependencyGraph.js:235:43)
at /Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/lib/transformHelpers.js:156:21
at resolveDependencies (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
at visit (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
at async Promise.all (index 9)
at async visit (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
at async Promise.all (index 3)
at async visit (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
at async Promise.all (index 5)

2. 使用相对路径导入时
   执行代码import { retrieveTokenSecurely } from '../screens/Auth/tokenStorage';，报错提示无法解析模块，Metro调用栈：

at ModuleResolver.resolveDependency (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:112:15)
at DependencyGraph.resolveDependency (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/node-haste/DependencyGraph.js:235:43)
at /Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/lib/transformHelpers.js:156:21
at resolveDependencies (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
at visit (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Promise.all (index 9)
at async visit (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
at async Promise.all (index 3)
at async visit (/Users/amit/Projects/projecttracker/frontend/react-native-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)

解决方案 #

1. 调整Metro配置以支持符号链接与跨目录解析 #

Metro默认对符号链接的处理有限，修改metro.config.js添加相关配置：

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

const customConfig = {
  resolver: {
    // 允许解析符号链接指向的文件
    resolveSymlinks: true,
    // 添加RN项目目录到模块搜索路径，适配别名解析
    extraNodeModules: {
      '@screens': path.resolve(__dirname, './frontend/react-native-app/screens'),
    },
    // 让Metro监听跨目录的文件变化，避免缓存问题
    watchFolders: [
      path.resolve(__dirname, './frontend/app-core'),
      path.resolve(__dirname, './frontend/react-native-app'),
    ],
  },
};

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

2. 使用正确的跨目录相对路径 #

如果不想修改Metro配置，直接使用从app-core到react-native-app的完整相对路径：

// 在ApiGateway.ts中修改导入语句
import { retrieveTokenSecurely } from '../../react-native-app/screens/Auth/tokenStorage';

3. 验证并重建符号链接 #

确认符号链接有效性，终端执行：

cd frontend/react-native-app/services
pwd -P

若输出不是/Users/amit/Projects/projecttracker/frontend/app-core/services，则重建符号链接：

cd frontend/react-native-app
rm -rf services
ln -s ../app-core/services services

4. 清除Metro缓存 #

修改配置或链接后，必须清除缓存才能生效：

npx react-native start --reset-cache

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