在 expo web 和 nextjs 中导入 expo 字体和资产答案

【问题标题】：Importing expo fonts and assets in expo web and nextjs在 expo web 和 nextjs 中导入 expo 字体和资产
【发布时间】：2020-11-03 03:14:32
【问题描述】：

我正在尝试将 expo 和 nextjs 用于我的网络应用程序，并且我已尝试实施文档中列出的步骤以使我能够使用字体和图像，但是我不断收到此错误

错误 - ./assets/fonts/Fontisto.ttf 1:0 模块解析失败：意外字符 ' ' (1:0) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理这个文件。见https://webpack.js.org/concepts#loaders（此二进制文件源代码省略）

下面是我的 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 }
);

【问题讨论】：

标签： reactjs react-native expo next.js expo-web

【解决方案1】：

这是我使用的有效方法：

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

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

【讨论】：

【解决方案2】：

这应该可行。

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 }
    ]
  ], 
  {
    // ...
  }
);

参考：This example

【讨论】：

解释更详细，不只写代码解决方案