Mac环境下React Native初始化项目遇transformFile未定义错误求助

问题 #

在Mac（M1芯片，macOS 13.3.1）环境初始化React Native项目时，出现以下TypeError错误：

TypeError: Cannot read properties of undefined (reading 'transformFile')
at Bundler.transformFile (/Users/.../node_modules/metro/src/Bundler.js:48:30)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.transform (/Users/.../node_modules/metro/src/lib/transformHelpers.js:101:12)
at async processModule (/Users/victorgelvis/Documents/mts/mts-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:137:18)
at async traverseDependenciesForSingleFile (/Users/victorgelvis/Documents/mts/mts-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:131:3)
at async Promise.all (index 0)
at async initialTraverseDependencies (/Users/victorgelvis/Documents/mts/mts-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:114:3)
at async DeltaCalculator._getChangedDependencies (/Users/victorgelvis/Documents/mts/mts-app/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:164:25)
at async DeltaCalculator.getDelta (/Users/victorgelvis/Documents/mts/mts-app/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:94:16)
at async DeltaBundler.buildGraph (/Users/victorgelvis/Documents/mts/mts-app/node_modules/metro/src/DeltaBundler.js:50:5)

环境信息：

info Fetching system and libraries information...
System:
OS: macOS 13.3.1
CPU: (8) arm64 Apple M1
Memory: 106.48 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.12.1 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.67.2 => 0.67.2
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found

解决方案 #

这个错误多由Metro与Node/React Native版本不兼容、依赖缺失或配置异常导致，按以下步骤排查：

1. 安装Watchman #

Watchman是React Native推荐的文件监听工具，缺失可能引发打包异常，执行：

brew install watchman

2. 修复Metro配置 #

在项目根目录创建或修改metro.config.js，确保配置正确：

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

const config = getDefaultConfig(__dirname);

module.exports = config;

若项目用到SVG资源，可使用完整配置：

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const { resolver: { sourceExts, assetExts } } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

3. 清除缓存并重装依赖 #

清理缓存、重置依赖可解决大部分版本冲突问题：

# 重置Metro缓存
npx react-native start --reset-cache

# 删除依赖目录与锁文件
rm -rf node_modules package-lock.json yarn.lock

# 重装依赖（选对应包管理器）
npm install
# 或
yarn install

# iOS项目需重新安装Pods
cd ios && pod install && cd ..

4. 验证Node版本兼容性 #

React Native 0.67.x适配Node 14.x-16.x，当前16.20.0符合要求，若问题仍存在，可切换至16.18.0（LTS稳定版）：

nvm install 16.18.0
nvm use 16.18.0

5. 安装React Native CLI工具 #

全局缺失CLI可能导致初始化流程异常，执行：

npm install -g @react-native-community/cli

内容的提问来源于stack exchange，提问作者Victor Alberto Gelvis Oviedo