Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit')

Question

I'm using the react-pdf/renderer package to add functionality to download a pdf from my website. But I'm getting this error message: ./node_modules/@react-pdf/font/lib/index.browser.es.js Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').

I tried to use different versions of this package, such as v2.2.0, v2.3.0 and v3.0.0, but unfortunately, nothing worked for me. I'm using react v^17.0.2.

PDF Document code:

import { Document, Page, StyleSheet, Text, View } from "@react-pdf/renderer";
import React from "react";

const styles = StyleSheet.create({
  page: {
    flexDirection: "row",
    backgroundColor: "#E4E4E4",
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

const InvoicePDF = () => {
  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.section}>
          <Text>Section #1</Text>
        </View>
        <View style={styles.section}>
          <Text>Section #2</Text>
        </View>
      </Page>
    </Document>
  );
};

export default InvoicePDF;

PDF Download button:

import React from "react";
import InvoicePDF from "../invoicePDF/InvoicePDF";
import { pdf } from "@react-pdf/renderer";
import { saveAs } from "file-saver";

const InvoiceFooter = ({ data }) => {
  return (
        <button
          className="w-full text-white text-sm font-bold px-6 py-4 rounded-full transition bg-borderOne hover:bg-gray-200 hover:text-borderOne"
          onClick={async () => {
            const doc = <InvoicePDF />;
            const asPdf = pdf([]);
            asPdf.updateContainer(doc);
            const blob = await asPdf.toBlob();
            saveAs(blob, "document.pdf");
          }}
        >
          Download PDF
        </button>
  );
};

export default InvoiceFooter;

have you checked the library github repo issues? - https://github.com/diegomura/react-pdf/issues/1991 — Jaromanda X, Aug 30 '22 at 14:14
The issue was reported 8 hours ago and the repo devs haven't found a solution yet - at least you know where to look now — Jaromanda X, Aug 30 '22 at 14:30
I am also facing the issue while building on node version 14 but when I try with node 18 its working — Adhikansh Mittal, Aug 31 '22 at 17:41

score 14 · Answer 1 · edited Feb 03 '23 at 13:11

14

After doing a lot of research this one works for me. Add:

"@react-pdf/renderer":" 2.1.0",
"@react-pdf/font": "2.2.0",
To your package.json dependencies.

Then below dependencies add:

"resolutions": {
    "@react-pdf/font": "2.2.0"
  },

If you already have a resolutions object you'll just need to add this version to it. Notice there is no ^ in the version number.

Then remove yarn.lock or package-lock.json and re-run yarn/npm install

edited Feb 03 '23 at 13:11

JasonK97

23
5

answered Sep 01 '22 at 06:20

Adhikansh Mittal

601
1
5
13

Which version of react-pdf did you use? – Spirconi Sep 13 '22 at 10:13
I don't use @react-pdf only use above mention packages – Adhikansh Mittal Sep 13 '22 at 10:33
There might be type: `"@react-pdf/renderer":" 2.1.0",` – Hasan Gökçe Sep 14 '22 at 12:25

score 7 · Answer 2 · edited Sep 07 '22 at 10:35

7

"@react-pdf/renderer": "2.1.0",
"@react-pdf/font": "2.2.0",

"resolutions": {
    "@react-pdf/font": "2.2.0"
  },

To your package.json dependencies.

edited Sep 07 '22 at 10:35

Rabhi salim

486
5
17

answered Sep 01 '22 at 13:10

Fahim Montasir

71
1

score 7 · Answer 3 · answered Sep 13 '22 at 18:06

If you are using npm & not yarn, you could try the following

Update @react-pdf/renderer from ^2.2.0 to 3.0.0
Add an overrides key to my package.json that looks like;

"overrides": {
    "@react-pdf/font": "2.2.1",
    "@react-pdf/pdfkit": "2.1.0"
  }

Your package.json file should look something like;

// other stuff in the package.json file
"dependencies": {
// other dependencies in the package.json file
   "@react-pdf/renderer": "3.0.0"
}
"overrides": {
    "@react-pdf/font": "2.2.1",
    "@react-pdf/pdfkit": "2.1.0"
}
// other stuff in the package.json file

This was the only solution here that worked for me, thanks! – todbott Oct 16 '22 at 05:41 — todbott, Oct 16 '22 at 05:41

score 2 · Answer 4 · answered Nov 16 '22 at 11:11

I use yarn and this Github issue answer worked for me.

"resolutions": {
"@react-pdf/font": "2.2.1",
"@react-pdf/pdfkit": "2.1.0"
}

Link: https://github.com/diegomura/react-pdf/issues/2015#issuecomment-1246286312

As described in the issue thread "overrides" work for npm and resolutions work for yarn.

score 1 · Answer 5 · answered Mar 17 '23 at 09:45

I am using @react-pdf/renderer in the scope of a @microsoft/rush based monorepository.

I am using pnpm to manage packages, therefore I needed to provide a pnpmOverride. Actually, I think you need to do that regardless whether you use a monorepo or not.

For rush monorepos

you need to use at least version 5.79.0. Before that version, it was not possible to define pnpmOverrides. See https://rushjs.io/pages/configs/pnpm-config_json/
provide the following value to globalOverrides within pnpm-config.json:

"globalOverrides": {
    "@react-pdf/font": "2.2.1",
    "@react-pdf/pdfkit": "2.1.0"
},

For plain pnpm repos

add the pnpm.overrides object to your package.json. See https://pnpm.io/package_json#pnpmoverrides

// package.json

{
  "pnpm": {
    "overrides": {
        "@react-pdf/font": "2.2.1",
        "@react-pdf/pdfkit": "2.1.0"
    }
  }
}

score 0 · Answer 6 · answered Aug 31 '22 at 02:36

0

i used "@react-pdf/renderer": "^1.6.8", this version. and working fine

answered Aug 31 '22 at 02:36

atul Kumar gautam

11
2

Could not resolve dependency: npm ERR! peer react@"^16.0.0" from @react-pdf/renderer@1.6.12 npm ERR! node_modules/@react-pdf/renderer npm ERR! @react-pdf/renderer@"1.6.12" from the root project – Nyagaka Enock Aug 31 '22 at 10:34

score 0 · Answer 7 · answered Sep 16 '22 at 16:29

0

Give this a try:

  "overrides": {
    "@react-pdf/font": "2.2.0",
    "@react-pdf/pdfkit": "2.1.0",
  }

answered Sep 16 '22 at 16:29

Hasan Gökçe

501
6
6

score 0 · Answer 8 · answered Feb 02 '23 at 20:54

Using yarn, I was able to solve the issue by adding:

"dependencies": {
// all other dependencies
"@react-pdf/renderer": "3.0.0",
}

Then:

"resolutions": {
"@react-pdf/font": "2.2.1",
"@react-pdf/pdfkit": "2.1.0"
},

As "resolutions" is to yarn like "overrides" is to npm.

Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit')

8 Answers8

For rush monorepos

For plain pnpm repos