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

Posted 2023-02-19

【中文标题】在 expo web 和 nextjs 中导入 expo 字体和资产

【英文标题】：Importing expo fonts and assets in expo web and nextjs

【发布时间】：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 
);

【参考方案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

【讨论】：

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