Импорт шрифтов и ассетов expo в expo web и nextjs

Question

Я пытаюсь использовать expo и nextjs для своего веб-приложения, и я попытался реализовать шаги, перечисленные в документе, чтобы позволить мне использовать шрифты и изображения, однако я продолжаю получать эту ошибку

ошибка - ./assets/fonts/Fontisto.ttf 1:0 Ошибка синтаксического анализа модуля: неожиданный символ ' ' (1:0). Для обработки этого типа файла может потребоваться соответствующий загрузчик, в настоящее время загрузчики не настроены для обработки этого файла. См. https://webpack.js.org/concepts (исходный код для этого двоичного файла опущен)

ниже мой nex.config.js

const { withExpo } = require('@expo/next-adapter');
const withImages = require('next-images');
const withFonts = require('next-fonts');

// module.exports = withExpo({
//   projectRoot: __dirname,
// });
//
// module.exports = withExpo(
//   withFonts({
//     projectRoot: __dirname,
//   })
// );
//
// module.exports = withExpo(
//   withImages({
//     projectRoot: __dirname,
//   })
// );

module.exports = withExpo(
  [
    withFonts,
    withImages,
  ],
  { projectRoot: __dirname }
);

Answer 1

Это должно работать.

      const { withExpo } = require("@expo/next-adapter");
const withFonts = require("next-fonts");
const withImages = require("next-images");
const withPlugins = require("next-compose-plugins");

const withTM = require("next-transpile-modules")([
  "expo-next-react-navigation",
  // you can add other modules that need traspiling here
]);

module.exports = withPlugins(
  [
    withTM, 
    withFonts, 
    withImages, 
    [
      withExpo, 
      { projectRoot: __dirname }
    ]
  ], 
  {
    // ...
  }
);

Ссылка: этот пример

Answer 2

Вот что я использую, что работает:

      const { withExpo } = require('@expo/next-adapter');
const withFonts = require('next-fonts');

module.exports = withExpo(
  withFonts({
    projectRoot: __dirname,
  })
);

Answer 3

1. Установите необходимые плагины

      npm install --save next-compose-plugins expo-font

или же

      yarn add next-compose-plugins expo-font

2. Настройка

next.config.js

      const { withExpo } = require('@expo/next-adapter');
const withFonts = require('next-fonts');
const withImages = require('next-optimized-images');
const withPlugins = require("next-compose-plugins");

module.exports = withPlugins([
  withFonts,
  withImages,
  [
    withExpo,
    { projectRoot: __dirname }
  ]
]);

3. Объявление типа

Создайте следующий файл, чтобы иметь возможность использовать importзаявление для ваших шрифтов.

declarations.d.ts

Вставьте следующее внутрь файла.

      declare module '*.ttf' {}

4. Загрузите шрифты

Я создал следующий пользовательский хук для асинхронной загрузки ресурсов.

useResources.ts

      import * as Font from 'expo-font';
import { useEffect, useState } from 'react';

import YOUR_FONT_FILE_HERE from '/path/to/fonts/FONT_NAME.ttf';

export const useResources = () => {
  const [isFontReady, setIsFontReady] = useState(false);

  const loadFontAsync = async () => {
    try {
      await Font.loadAsync({
        HindRegular: {
          uri: YOUR_FONT_FILE_HERE as any,
          display: Font.FontDisplay.SWAP,
        }
      });
    } catch (error) {
      console.log('Font Load Error:', error)
    } finally {
      setIsFontReady(true);
    }
  }

  useEffect(() => {
    loadFontAsync();
  }, []);

  return {
    isFontReady
  }
};

5. Использование

Здесь мы удостоверяемся, что ресурсы доступны, прежде чем пытаться их использовать.

      export default function App() {
  const { isFontReady } = useResources();

  if (!isFontReady) {
    return (
      <View>
        <Text>Resources are loading...</Text>
      </View>
    )
  }
  
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to Expo + Next.js </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
    fontFamily: 'YOUR_FONT_NAME_HERE' <----- HERE
  },
});

Ресурсы для дальнейшего чтения.

ответ на закрытый вопрос (открытие глаз)

Экспо-Шрифт

Экспо-NextJS