import font (.tff) file fails due to "invalid or unexpected token"

Question

I am trying to import a font file like so:

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

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

this is the d.ts file

declare module '*.ttf';

But I get the following error:

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)

these are the relevant packages and their versions

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

I already tried a few different font files to make sure it was not an issue with the .tff file.
Is there anything I need to set up to import or use tff font files?
I feel like the part at Object.require.extensions.<computed> [as .js] has something to do with the issue (is it trying to import a tff file a a js file?) but I don't know what to do with said information.

Sudhir

Answer 1

The issue was that I didn't need to import when using @react-pdf/renderer.
Just needed to write down the file path in the 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'),
});

Sudhir