Macbook Pro M1X搭建React Native环境遇TypeError: cli.init is not a function错误

环境信息 #

• 设备：Macbook Pro M1X
• 已安装组件：
  • Node & Watchman
  • Xcode（已配置Command Line Tools，安装iOS模拟器）
  • Ruby 2.7.6 + CocoaPods

遇到的错误 #

1. WebStorm创建新项目时报错 #

TypeError: cli.init is not a function
    at run (/Users/mymac1/.npm/_npx/10e3bde211213596/node_modules/react-native-cli/index.js:302:7)
    at createProject (/Users/mymac1/.npm/_npx/10e3bde211213596/node_modules/react-native-cli/index.js:249:3)
    at /Users/mymac1/.npm/_npx/10e3bde211213596/node_modules/react-native-cli/index.js:217:7)
    at /Users/mymac1/.npm/_npx/10e3bde211213596/node_modules/prompt/lib/prompt.js:316:32
    at /Users/mymac1/.npm/_npx/10e3bde211213596/node_modules/async/lib/async.js:142:25
    at assembler (/Users/mymac1/.npm/_npx/10e3bde211213596/node_modules/prompt/lib/prompt.js:313:9)
    at /Users/mymac1/.npm/_npx/10e3bde211213596/node_modules/prompt/lib/prompt.js:322:32
    at /Users/mymac1/.npm/_npx/10e3bde211213596/node_modules/prompt/lib/prompt.js:597:5)
    at Interface.onLine (/Users/mymac1/.npm/_npx/10e3bde211213596/node_modules/read/lib/read.js:111:5)
    at Interface.emit (node:events:512:28)

2. 终端执行npx react-native init mnkn --version 0.68.2报错 #

error Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
Error: Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI 

已尝试操作 #

• 执行yarn add expo后，再次运行npx react-native init mnkn --version 0.68.2，终端创建项目成功，但WebStorm中仍出现相同cli.init is not a function错误。
• 本人为JavaScript和React Native新手，仅接触过Python和C语言，未找到有效解决办法。

解决方案 #

解决TypeError: cli.init is not a function错误 #

这个问题源于全局安装的旧版react-native-cli与新版React Native CLI不兼容，新版React Native已不需要全局安装该工具：

1. 卸载全局的react-native-cli：

   npm uninstall -g react-native-cli
   # 若用yarn则执行：
   yarn global remove react-native-cli
   

2. 清理npm缓存：

   npm cache clean --force
   

3. 重启WebStorm，若IDE创建向导仍报错，直接用终端创建项目后导入WebStorm，避开IDE自带向导的兼容性问题。

解决iOS环境配置报错 #

M1芯片设备需额外处理兼容性问题：

1. 打开Xcode并同意所有许可协议，启动一次iOS模拟器确认能正常运行。
2. 确认当前终端Ruby版本为2.7.6：

   ruby -v
   

3. 针对M1架构重新安装CocoaPods依赖：

   sudo arch -x86_64 gem install ffi
   arch -x86_64 pod install
   

4. 终端创建项目后，进入项目ios目录执行pod install，再回到根目录运行npx react-native run-ios启动项目。

WebStorm适配建议 #

WebStorm的React Native创建向导可能未适配新版CLI，建议通过终端创建项目后，用File -> Open导入项目到WebStorm中。

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