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;

Answer 1

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

Answer 2

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