Ошибка: модуль «3» отсутствует в реестре активов при загрузке шрифтов

Я пытаюсь загрузить сюда несколько шрифтов и не могу избавиться от этой ошибки:

import { useFonts } from "expo-font";
import { Stack, SplashScreen } from "expo-router";
import { useEffect } from "react";

SplashScreen.preventAutoHideAsync();

const RootLayout = () => {
  const [fontsLoaded, error] = useFonts({
    "Poppins-Black": require("../assets/fonts/Poppins-Black.ttf"),
    "Poppins-Bold": require("../assets/fonts/Poppins-Bold.ttf"),
    "Poppins-ExtraBold": require("../assets/fonts/Poppins-ExtraBold.ttf"),
    "Poppins-ExtraLight": require("../assets/fonts/Poppins-ExtraLight.ttf"),
    "Poppins-Light": require("../assets/fonts/Poppins-Light.ttf"),
    "Poppins-Medium": require("../assets/fonts/Poppins-Medium.ttf"),
    "Poppins-Regular": require("../assets/fonts/Poppins-Regular.ttf"),
    "Poppins-SemiBold": require("../assets/fonts/Poppins-SemiBold.ttf"),
    "Poppins-Thin": require("../assets/fonts/Poppins-Thin.ttf"),
  });

  useEffect(() => {
    if (error) {
      console.info("Font Loading Error:", error); // Log the specific error
      throw error;
    }

    if (fontsLoaded) {
      console.info("Fonts Loaded Successfully!");
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded, error]);

  if (!fontsLoaded) {
    return null;
  }

  if (!fontsLoaded && !error) {
    return null;
  }

  return (
    <Stack>
      <Stack.Screen name = "(tabs)" options = {{ headerShown: false }} />
      <Stack.Screen name = "(auth)" options = {{ headerShown: false }} />
      <Stack.Screen name = "index" options = {{ headerShown: false }} />
      <Stack.Screen name = "search/[query]" options = {{ headerShown: false }} />
    </Stack>
  );
};

export default RootLayout;

Вот package.json:

{
  "name": "aora",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@babel/runtime": "^7.24.4",
    "@react-native/assets-registry": "0.75.0-main",
    "expo": "~50.0.17",
    "expo-constants": "~15.4.6",
    "expo-font": "^11.10.3",
    "expo-linking": "~6.2.2",
    "expo-router": "~3.4.8",
    "expo-status-bar": "~1.11.1",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0"
  },
  "devDependencies": {
    "@babel/core": "^7.24.4",
    "tailwindcss": "3.3.2"
  },
  "private": true
}

Также структура проекта и app.json:

корень -> ресурсы -> шрифты

{
  "expo": {
    "name": "Aora",
    "slug": "aora",
    "scheme": "aora",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "./assets/**/*.{ttf,png}"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      "expo-router"
    ]
  }
}

Я пробовал очистить и пересобрать, удалив пакет @react-native/assets-registry, чтобы проверить, не конфликтует ли он с собственными функциями загрузки ресурсов Expo, но это важный пакет для проекта. Кто-нибудь может мне с этим помочь?

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
2
0
802
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Пути в useFonts отличаются на один уровень. Можете ли вы попробовать это вместо этого?

  const [fontsLoaded, error] = useFonts({
    "Poppins-Black": require("./assets/fonts/Poppins-Black.ttf"),
    "Poppins-Bold": require("./assets/fonts/Poppins-Bold.ttf"),
    "Poppins-ExtraBold": require("./assets/fonts/Poppins-ExtraBold.ttf"),
    "Poppins-ExtraLight": require("./assets/fonts/Poppins-ExtraLight.ttf"),
    "Poppins-Light": require("./assets/fonts/Poppins-Light.ttf"),
    "Poppins-Medium": require("./assets/fonts/Poppins-Medium.ttf"),
    "Poppins-Regular": require("./assets/fonts/Poppins-Regular.ttf"),
    "Poppins-SemiBold": require("./assets/fonts/Poppins-SemiBold.ttf"),
    "Poppins-Thin": require("./assets/fonts/Poppins-Thin.ttf"),
  });

И я не видел такого регулярного выражения в assetsBundlePatterns, может быть, стоит также изменить его на это?

    "assetBundlePatterns": [
      "./assets/**/*.ttf",
      "./assets/**/*.png"
    ],

Дайте мне знать, сработало ли это для вас

Путь был заполнен автоматически, я почти уверен, что это правильно. Если я изменю его, как вы сказали, я получу сообщение «Невозможно разрешить «./assets/fonts/Poppins-Black.ttf» из «app_layout.jsx»». Что касается assetsBundlePatterns, я только что дважды проверил его, и все в порядке, ошибка не устранена.

Caio 17.04.2024 22:49

Я думаю, вы посещаете курс JavaScript Mastery и теперь обновили свой проект до нового SDK, верно? Вы можете попробовать удалить модули узлов и установить их еще раз.

rm -rf node_modules
bun install expo@latest
bunx expo install --fix

Выполнил ваши действия, которые, я считаю, аналогичны предложению Мзато выше, и ошибка не устранена! И да, это из JSM, хе-хе

Caio 12.05.2024 04:21
Ответ принят как подходящий

После обновления до нового SDK вам необходимо обновить и другие пакеты.

Предупреждающее сообщение Expo

npm install [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

Ваш ответ аналогичен тому, что Элдин напечатал ниже, но после обновления он по-прежнему выдает ту же ошибку...

Caio 12.05.2024 04:22

попробуйте следующее:

  • очистите кеш вашего менеджера пакетов, я использую Bun для себя bun pm cache rm
  • удалить папку node_modules
  • bun install && bun expo install --fix
  • очистить кеш Metro Bundle rm -rf $TMPDIR/metro-cache
  • сгенерировать собственный код bun expo prebuild --platform ios --clean

Следовал вашему руководству шаг за шагом, и ошибка не исчезла. Это действительно раздражает, я могу вам это сказать, ха-ха

Caio 11.06.2024 20:44

Другие вопросы по теме