React Native+TypeScript配置路径别名后无法解析模块问题求助

核心问题 #

你配置的babel模块解析root指向./src，tsconfig的路径映射也基于src/前缀，但你当前的业务代码文件夹（assets、components、config、redux等）全部直接放在项目根目录，没有放到src文件夹下，导致解析器找不到对应文件。

解决步骤 #

1. 调整项目目录结构
   在项目根目录新建src文件夹，将根目录下的assets、components、config、redux全部移入src文件夹内，调整后结构如下：

├── src
│   ├── assets
│   ├── components
│   ├── config
│   │       constants.ts
│   └── redux
│       ├── actions
│       │       index.ts
│       │       stateActions.ts
│       ├── reducers
│       │       index.ts
│       │       stateReducer.ts
│       └── store
│               index.ts
├── node_modules
├── babel.config.js
├── tsconfig.json
├── package.json

2. 恢复babel配置文件格式
   删除当前的.babelrc文件，改回使用官方默认的babel.config.js，内容如下：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: [
          '.js',
          '.jsx',
          '.ts',
          '.tsx',
          '.android.js',
          '.android.tsx',
          '.ios.js',
          '.ios.tsx'
        ],
        alias: {
          '#src/*': ['./src/*'],
          '#configs/*': ['./src/config/*'],
          '#actions/*': ['./src/redux/actions/*'],
          '#reducers/*': ['./src/redux/reducers/*'],
          '#store/*': ['./src/redux/store/*']
        }
      }
    ]
  ]
};

3. 确认tsconfig配置
   你当前的tsconfig.json配置符合要求，无需修改。
4. 清除缓存重启项目
   React Native的metro缓存会导致配置修改不生效，必须执行重置缓存命令启动项目：

# 先清理依赖缓存（可选，修改过依赖时执行）
rm -rf node_modules && npm install
# iOS端额外执行
cd ios && rm -rf Pods Podfile.lock && pod install && cd ..

# 重置metro缓存启动
npx react-native start --reset-cache
# 新开终端执行对应端启动命令
# iOS启动：npx react-native run-ios
# Android启动：npx react-native run-android

配置完成后即可正常使用别名导入，比如导入config下的constants.ts：

import constants from '#configs/constants'

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