Expo Web: @Expo/Vector -ICons, не загружаясь после NPX Expo Export -p Web (не удалось декодировать загруженный шрифт) ⇐ Android

[Anonymous]

Question:
I'm building a React Native app using Expo and deploying it as a static web app with expo-router.
Everything works fine on iOS and Android, but when I build for web using:
npx expo export -p web
…my app builds successfully and deploys to Firebase Hosting, but on Консоль браузера я получаю:
Не удалось декодировать загруженную шрифт: https://shopping-list-08090208.web.app/ ... =web&hash=....> votsing fromsff? 1008813135 < /p>
И все мои материалы, entypo и другие значки не могут отображаться. app/_layout.tsx:

Код: Выделить всё

await Font.loadAsync({
'Material Icons': require('../assets/fonts/MaterialIcons.ttf'),
'Material Design Icons': require('../assets/fonts/MaterialCommunityIcons.ttf'),
Entypo: require('../assets/fonts/Entypo.ttf'),
});

Result:
Still fails on web, and throws "Failed to decode downloaded font" in the console.

• Tried overriding .loadFont() manually
  (MaterialIcons as any).loadFont = async () => {};

Result:
Did not fix the problem.

• Verified app.config.js
  assetBundlePatterns: ['**/*']

Result:
Fonts are correctly included in the exported /dist/assets folder.
Environment
Expo SDK: 51
expo-router: latest
@expo/vector-icons: bundled with Expo
Deployment: Firebase Hosting (expo export:web)
Platform: Web only (iOS/Android fine)
Expected Behavior
Icons from @expo/vector-icons (MaterialIcons, Entypo, etc.) should display correctly after expo export:web and deployment.
No Failed to decode downloaded font errors in console.
Actual Behavior
Fonts fail to load and icons do not render.
Console shows "Failed to decode downloaded font" and "OTS parsing error".
Happens only on web after export.
What I Think Might Be Happening
Maybe Expo isn’t preloading the vector icon fonts on web?
Maybe Firebase Hosting isn’t serving .ttf fonts with the correct Content-Type?
Maybe I need to call .loadFont() for each icon set before rendering?
Questions
How do I properly preload @expo/vector-icons fonts for web builds with expo-router?
Do I need to change anything in app.config.js or firebase.json?
app.config.js:

import 'dotenv/config';
process.env.EXPO_ROUTER_APP_ROOT = 'app';

export default {
expo: {
name: 'Shopping List',
slug: 'shopping-list',
version: '1.0.0',
orientation: 'portrait',
icon: './app/assets/images/icon.png',
scheme: 'shoppinglist',
userInterfaceStyle: 'automatic',
platforms: ['ios', 'android', 'web'],
android: {
package: '...',
googleServicesFile: './google-services.json',
intentFilters: [
{
action: 'VIEW',
data: [
{ scheme: 'shoppinglist' },
{
scheme: 'https',
host: '...',
},
],
category: ['BROWSABLE', 'DEFAULT'],
},
],
},
web: {
bundler: 'metro',
output: 'static',
favicon: './app/assets/images/icon.png',
},
assetBundlePatterns: ['**/*'],
extra: {
eas: {
projectId: '...',
},
},
plugins: [
'expo-router',
['expo-build-properties', { ios: { useFrameworks: 'static' } }],
'@react-native-firebase/app',
'@react-native-firebase/auth',
],
experiments: {
typedRoutes: true,
},
},
};

```
firebase.json:```{
"hosting": {
"public": "dist",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [{ "source": "**", "destination": "/index.html" }],
"headers": [
{
"source": "**/*.ttf",
"headers": [{ "key": "Content-Type", "value": "font/ttf" }]
}
]
}
}

< /code>
Вот как я загружаю значки: < /p>
import { MaterialIcons } from '@expo/vector-icons';


< /code>
Существует ли правильный способ сделать экспозицию загружать эти шрифты во время статического экспорта, чтобы иконки рендерировали правильно? или глобально
Правильная конфигурация для app.config.js и firebase.json
Проверенное рабочее решение для экспорта Expo: web + хостинг Firebase

Подробнее здесь: https://stackoverflow.com/questions/797 ... -p-web-fai