导入字体 (.tff) 文件因“无效或意外令牌”而失败

Question

我正在尝试导入字体文件，如下所示：

import { Font } from '@react-pdf/renderer'
import font from './NotoSansJP-Regular.ttf'

Font.register({
    family: "NotoSansJP-Regular",
    format: "truetype",
    src: font,
});

这是 d.ts 文件

declare module '*.ttf';

但是我收到以下错误：

SyntaxError: Invalid or unexpected token
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.require.extensions.<computed> [as .js] (.../node_modules/ts-node/src/index.ts:1608:43)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)

这些是相关的软件包及其版本

    "nodemon": "^3.1.0",
    "@react-pdf/renderer": "^3.4.2",
    "typescript": "^5.4.3"
    // nodejs: 20.11.1

我已经尝试了一些不同的字体文件，以确保这不是 .tff 文件的问题。
我需要设置什么才能导入或使用 tff 字体文件吗？
我觉得

at Object.require.extensions.<computed> [as .js]

部分与该问题有关（它是否试图将 tff 文件导入 js 文件？），但我不知道如何处理上述信息。

Answer 1

问题是我在使用

@react-pdf/renderer

时不需要导入。
只需要在

src

中写下文件路径即可。

import { Font } from '@react-pdf/renderer'
import path from 'path'

Font.register({
    family: "NotoSansJP-Regular",
    format: "truetype",
    src: path.join(__dirname, './NotoSansJP-Regular.ttf'),
});