@react-pdf-kit/polyfills
Advanced tools
@react-pdf-kit/polyfills fills the gaps in certain browser APIs that older browsers are missing, running before any viewer code executes. It's shipped as a separate package so it can be versioned independently from @react-pdf-kit/viewer.
Loading the polyfills package supports the following browsers:
| Chrome | Firefox | Edge | Safari | Safari iOS | Chrome Android |
|---|---|---|---|---|---|
| 119+ | 93+ | 119+ | 18.3+ | 18.3+ | 119+ |
To support older browser versions than the table above, pair the polyfills with the legacy PDF.js worker. The Override the PDF.js Worker guide in the docs covers the setup.
npm install @react-pdf-kit/polyfills
# or
pnpm add @react-pdf-kit/polyfills
# or
yarn add @react-pdf-kit/polyfills
# or
bun add @react-pdf-kit/polyfills
Import the package at the very top of your entry file, before any other imports. It's a side-effect import that runs synchronously, so placing it first guarantees the polyfills are in place before any code that depends on the patched APIs runs.
import "@react-pdf-kit/polyfills";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
A bare import "@react-pdf-kit/polyfills" will not run in Next.js. Next.js replaces polyfill imports with its own built-in polyfills at compile time, so the import is stripped before it executes.
The workaround is to serve the bundle as a static file and load it with <Script strategy="beforeInteractive">, which runs before hydration and bypasses the substitution. Copy the bundle in next.config.mjs:
import { copyFileSync } from "fs";
import { resolve } from "path";
copyFileSync(
resolve(__dirname, "node_modules/@react-pdf-kit/polyfills/dist/index.cjs.js"),
resolve(__dirname, "public/polyfills.js"),
);
/** @type {import('next').NextConfig} */
const nextConfig = {
// ...your config
};
export default nextConfig;
Then load it from your root layout:
import Script from "next/script";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<Script src="/polyfills.js" strategy="beforeInteractive" />
{children}
</body>
</html>
);
}
See Legacy Browser Support for the full Next.js walkthrough.
@react-pdf-kit/viewer@react-pdf-kit/viewer: The main viewer packageThis package is part of React PDF Kit and is governed by the same license as @react-pdf-kit/viewer. See that package for license details.
FAQs
Polyfills for react-pdf-kit
We found that @react-pdf-kit/polyfills demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Rolldown paused Rust React Compiler integration after a 5MB binary size increase raised concerns about shipping React-specific code to all Vite users.
Security News
/Research
Mini Shai-Hulud expands into the Go ecosystem after hitting LeoPlatform npm packages and targeting GitHub Actions workflows.
Security News
The Fable shutdown shows how quickly model access can become a business continuity risk for AI-dependent engineering teams.