卸载expo-font后Expo项目出现export语法错误及Tamagui属性报错

问题描述 #

使用Expo + React Native + Tamagui开发项目，通过GitHub管理版本。执行npm uninstall expo-font命令后，出现两类问题：

1. 语法错误：node_modules\expo\AppEntry.js: Unexpected token 'export'
2. Tamagui组件属性报错：YStack的f、Paragraph的jc属性不被识别，具体错误信息如下：

f error : Type '{ children: Element[]; f: number; jc: string; ai: string; backgroundColor: "$backgroundSoft"; }' is not assignable to type 'IntrinsicAttributes & Omit<ViewProps, "display" | "children" | "style" | "onLayout" | keyof GestureResponderHandlers> & ... 10 more ... & RefAttributes<...>'.
Property 'f' does not exist on type 'IntrinsicAttributes & Omit<ViewProps, "display" | "children" | "style" | "onLayout" | keyof GestureResponderHandlers> & ... 10 more ... & RefAttributes<...>'.
jc error : Type 'string' is not assignable to type 'undefined'.ts(2322)

注：f、jc是Tamagui默认内置的简写属性。

项目代码 #

App.tsx #

import { useFonts } from "expo-font"
import React from "react"
import { StatusBar } from "expo-status-bar"
import { useColorScheme } from "react-native"
import { Paragraph, TamaguiProvider, Theme, YStack } from "tamagui"
import config from "./tamagui.config"
export default function App() {
 const colorScheme = useColorScheme()
 const [loaded] = useFonts({
    Urbanist: require("./assets/fonts/Urbanist-Bold.otf"),
    UrbanistSemibold: require("./assets/fonts/Urbanist-SemiBold.otf"),
    UrbanistMedium: require("./assets/fonts/Urbanist-Medium.otf"),
    UrbanistRegular: require("./assets/fonts/Urbanist-Regular.otf"),
  })
 if (!loaded) {
    return null
  }
  return (
    <TamaguiProvider config={config}>
      <Theme name={colorScheme === "dark" ? "dark" : "light"}>
        <YStack
          f={1}
          jc="center"
          ai="center"
          backgroundColor="$backgroundSoft"
        >
          <Paragraph color="$color" jc="center">
            {colorScheme}
          </Paragraph>
          <StatusBar style="auto" />
        </YStack>
      </Theme>
    </TamaguiProvider>
  )
}

package.json #

{
  "dependencies": {
    "@tamagui/animations-react-native": "^1.43.13",
    "@tamagui/babel-plugin": "^1.43.13",
    "@tamagui/config": "^1.43.13",
    "@tamagui/font-inter": "^1.43.13",
    "@tamagui/theme-base": "^1.43.13",
    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
    "expo": "~48.0.18",
    "expo-font": "~11.1.1",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "0.71.8",
    "react-native-reanimated": "~2.14.4",
    "react-native-web": "^0.19.6",
    "tamagui": "^1.43.13"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.0.14",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "eslint": "^8.46.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-config-standard-with-typescript": "^37.0.0",
    "eslint-plugin-import": "^2.28.0",
    "eslint-plugin-n": "^16.0.1",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.33.1",
    "husky": "^8.0.3",
    "prettier": "3.0.1",
    "typescript": "^4.9.5"
  },
  "private": true,
  "lint-staged": {
    "*.{ts,js,jsx,tsx}": [
      "eslint --ignore-path .gitignore --fix --max-warnings 0",
      "prettier --ignore-path .gitignore --write"
    ]
  }
}

已尝试的无效方案 #

• 删除node_modules后重新安装
• 执行npx expo install expo-font
• 清理npm缓存：npm cache clean --force
• 合并main与theme分支

解决步骤 #

1. 修复Expo依赖与转译问题 #

执行Expo自带的依赖修复命令，强制同步依赖版本并修复转译配置：

npx expo install --fix

2. 检查Tamagui Babel插件配置 #

Tamagui的简写属性需要依赖Babel插件转译，确保babel.config.js配置正确：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'transform-inline-environment-variables',
      [
        '@tamagui/babel-plugin',
        {
          components: ['tamagui'],
          config: './tamagui.config.ts',
          logTimings: true,
        },
      ],
      'react-native-reanimated/plugin',
    ],
  };
};

注意：react-native-reanimated/plugin必须放在插件数组的最后一位。

3. 重新生成Tamagui类型定义 #

依赖变动可能导致类型定义失效，执行命令重新生成：

npx tamagui generate-types

之后重启TypeScript语言服务（VS Code中可按Ctrl+Shift+P，选择"TypeScript: Restart TS Server"）。

4. 清理Metro缓存 #

残留的缓存可能导致旧转译结果生效，执行命令彻底清理后重启项目：

npx expo start --clear

5. 确认expo-font状态 #

如果不需要自定义字体，彻底移除expo-font并删除App.tsx中useFonts相关代码；如果需要保留，先彻底卸载再重新安装：

npm uninstall expo-font
npx expo install expo-font

内容的提问来源于stack exchange，提问作者erdi yılmaz