React TypeScript中安装ttf-loader失败，react-pdf字体加载遇阻求助

问题根源 #

你尝试安装的ttf-loader是多年未维护的旧包（最新版本停留在2018年），它依赖的file-loader@1.1.11仅支持webpack 2.x-4.x，但你的项目使用的是webpack 5.x，导致依赖树冲突无法正常安装。另外，webpack 5已经内置了处理字体等资源文件的能力，完全不需要依赖这类过时的loader。

解决方案（分场景） #

场景1：自定义webpack配置的项目（非Create React App） #

直接使用webpack 5内置的Asset Modules处理字体文件，无需额外安装任何loader：

1. 修改webpack.config.js，添加字体文件处理规则：

module.exports = {
  // ...其他已有配置
  module: {
    rules: [
      // ...已有的TS、CSS等处理规则
      {
        // 匹配所有常见字体格式
        test: /\.(ttf|otf|eot|woff|woff2)$/,
        type: 'asset/resource',
        // 可选：指定字体打包后的输出路径
        generator: {
          filename: 'assets/fonts/[name].[hash][ext]'
        }
      }
    ]
  }
};

2. 保持你原有的字体注册代码不变：

import { Text, View, StyleSheet, Font } from "@react-pdf/renderer";
import MyCustomFont from "../fonts/Calibri.ttf"

Font.register({
    family: "CalibriFamily",
    src: MyCustomFont
})

3. 重新启动项目即可。

场景2：Create React App（CRA）项目 #

CRA默认隐藏webpack配置，最简单的方式是将字体文件放到public目录下，直接通过绝对路径引用：

1. 将Calibri.ttf放到public/fonts/目录下（无fonts文件夹则新建）。
2. 修改字体注册代码：

import { Font } from "@react-pdf/renderer";

Font.register({
  family: "CalibriFamily",
  src: `${window.location.origin}/fonts/Calibri.ttf`
});

3. 重启项目即可生效。

若需修改CRA的webpack配置，可使用craco或react-app-rewired工具，再按照场景1的方式添加Asset Modules规则。

备选方案：使用兼容webpack5的file-loader #

如果坚持要用loader，安装最新版file-loader（已支持webpack5）：

1. 安装依赖：

npm install file-loader --save-dev

2. 修改webpack配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ttf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  }
};

3. 保持字体注册代码不变，重启项目。

内容的提问来源于stack exchange，提问作者Mahesh Yarasi