React Native新手使用Expo时遇Unexpected character语法错误求助

问题描述 #

作为React Native纯新手，使用Expo时触发语法错误：

error: SyntaxError: .\node_modules\expo\build\Expo.fx.js: Unexpected character ''. (1:0)

该错误表明Expo.fx.js文件开头存在无法被解析的特殊字符。项目的package.json内容如下：

{
  "name": "dogecoin",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@mindinventory/react-native-tab-bar-interaction": "^2.2.3",
    "@react-native-async-storage/async-storage": "^1.19.3",
    "@react-native-firebase/storage": "^18.4.0",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/material-bottom-tabs": "^6.2.16",
    "@react-navigation/material-top-tabs": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "email-validator": "^2.0.4",
    "expo": "^49.0.7",
    "expo-camera": "~13.4.4",
    "expo-image-picker": "~14.3.2",
    "expo-secure-store": "~12.3.1",
    "expo-status-bar": "~1.6.0",
    "firebase": "^10.4.0",
    "react": "18.2.0",
    "react-native": "0.72.4",
    "react-native-animatable": "^1.3.3",
    "react-native-element-dropdown": "^2.10.0",
    "react-native-gesture-handler": "^2.12.1",
    "react-native-loading-spinner-overlay": "^3.0.1",
    "react-native-modal": "^13.0.1",
    "react-native-pager-view": "6.2.0",
    "react-native-paper": "^5.10.4",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-tab-view": "^3.5.2",
    "react-native-toast-message": "^2.1.6",
    "react-native-vector-icons": "^10.0.0",
    "whatwg-fetch": "^3.6.2",
    "yarn": "^1.22.19"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

解决步骤 #

1. 清理缓存并重装依赖 #

这类错误大多由依赖安装不完整或缓存异常导致，执行以下命令：

• 删除依赖文件夹和锁文件：

  rm -rf node_modules package-lock.json yarn.lock
  

• 重新安装依赖：

  npm install
  # 若使用yarn则执行：yarn install
  

• 清理Expo缓存并启动项目：

  npx expo start --clear
  

2. 检查文件编码与特殊字符 #

如果第一步无效，手动排查node_modules/expo/build/Expo.fx.js：

• 用VS Code等编辑器打开文件，查看开头是否存在不可见特殊字符（如BOM头、异常空白符）
• 若发现特殊字符，直接删除后保存，再重启项目。

3. 验证版本兼容性 #

你的expo@49.0.7与react-native@0.72.4属于官方兼容组合（Expo 49对应RN 0.72.x），若前两步无效，可尝试调整Expo版本：

# 降级到同大版本的稳定版
npm install expo@49.0.0
# 或升级到最新兼容版本
# npm install expo@latest

4. 排查第三方库冲突 #

项目依赖的第三方库较多，部分库可能与Expo存在兼容性问题。可临时移除非核心库（如@react-native-firebase/storage、@mindinventory/react-native-tab-bar-interaction），重装依赖后启动项目，逐一排查冲突源。

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