@react-pdf/renderer can't use fonts when building for node

Question

I am trying to build an app that uses react-pdf/renderer. I will send a pdf response from node js express server. The fonts I use in react-pdf/renderer (.ttf) seems like are fetched via XMLHttpRequest (inside the library). In the final build I can see that it uses XMLHttpRequest. When I try to execute this in node js it crashes because of that, it does not exist. How I can convert it into node-fetch or something else to make it work? Do I need to polyfill that? And how? I use rollup

The fonts are registered with the standard way Font.register() with external url

ts config:

{
    "compilerOptions": {
    "baseUrl": "src/",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

rollup base config:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import { babel } from '@rollup/plugin-babel';
import json from '@rollup/plugin-json';

export default {
  plugins: [
    peerDepsExternal(),
    resolve({
      browser: true,
      preferBuiltins: false,
    }),
    // resolve(),
    commonjs(),
    babel({
      babelHelpers: 'bundled',
      exclude: /node_modules/,
      presets: ["@babel/preset-react", "@babel/preset-typescript"],
    }),
    typescript({
      tsconfig: "./tsconfig.json",
      outputToFilesystem: true,
    }),
    json(),
  ],
};

rollup config:

import terser from '@rollup/plugin-terser';
import baseConfig from './rollup.base.config.js';

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: 'dist/module.js',
        format: 'cjs',
        sourcemap: true,
      },
    ],
    external: ['react', 'react-dom'],
    preserveModules: true,
    plugins: [
      ...baseConfig.plugins,
      terser(),
    ],
  },
];

I can build it with "rollup -c".

In node server I just do:

await renderToStream(
    t(data)   // t is something that is imported from the build
  );

It works without the fonts.

How I can fix the XMLHttpRequest problem?

Oki · Accepted Answer · 2024-10-26 19:30:34Z

0

The way I resolved the issue:

Actually it wasn't a XMLHttpRequest issue.

It turns out that renderToStream needs those font registrations as well. Registering them only in the build was not enough. If I register the fonts in node server, I can omit the registration in the build.

The Font that is used in the build is different than the Font that is used in node server.

If I use PDFViewer to render in browser, then I need to register the fonts there. But If I am making a build for node js that will use renderToStream, then I must register them in node, instead of the build.

answered Oct 26, 2024 at 19:30

Oki

3,3652 gold badges12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

@react-pdf/renderer can't use fonts when building for node

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related