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;
CodePudding user response:
i used "@react-pdf/renderer": "^1.6.8", this version. and working fine
CodePudding user response:
After doing a lot of research this one works for me. Add:
"@react-pdf/rendered":" 2.1.0",
"@react-pdf/font": "2.2.0",
To your package.json dependencies.
Then 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
CodePudding user response:
"@react-pdf/renderer": 2.1.0", "@react-pdf/font": "2.2.0",
"resolutions": { "@react-pdf/font": "2.2.0" }, To your package.json dependencies.