Text Component Crash the app when rendering ++, when using JetBrains Mono Font
FatahChan opened this issue · comments
Ahmad Fathallah commented
Before you start - checklist
- I followed instructions in documentation written for my React-PDF version
- I have checked if this bug is not already reported
- I have checked if an issue is not listed in Known issues
- If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo
Description
The app breaks when Text has ++
when using JetBrains Mono
font
Console error
@react-pdf_renderer.js?v=14ef2079:97962 RangeError: Offset is outside the bounds of the DataView
Steps to reproduce
import { Document, Page, PDFViewer, Text, View, Font } from "@react-pdf/renderer";
import JetBrainsMonoBold from "../fonts/JetBrainsMono-Bold.ttf";
import JetBrainsMonoRegular from "../fonts/JetBrainsMono-Regular.ttf";
import JetBrainsMonoLight from "../fonts/JetBrainsMono-Light.ttf";
import JetBrainsMonoMedium from "../fonts/JetBrainsMono-Medium.ttf";
import JetBrainsMonoExtraBold from "../fonts/JetBrainsMono-ExtraBold.ttf";
import JetBrainsMonoSemiBold from "../fonts/JetBrainsMono-SemiBold.ttf";
import JetBrainsMonoThin from "../fonts/JetBrainsMono-Thin.ttf";
import JetBrainsMonoExtraLight from "../fonts/JetBrainsMono-ExtraLight.ttf";
Font.register({
family: "JetBrains Mono",
format: "truetype",
fonts: [
{ src: JetBrainsMonoThin, fontWeight: "thin" },
{ src: JetBrainsMonoExtraLight, fontWeight: "ultralight" },
{ src: JetBrainsMonoLight, fontWeight: "light" },
{ src: JetBrainsMonoRegular, fontWeight: "normal" },
{ src: JetBrainsMonoMedium, fontWeight: "medium" },
{ src: JetBrainsMonoSemiBold, fontWeight: "semibold" },
{ src: JetBrainsMonoBold, fontWeight: "bold" },
{ src: JetBrainsMonoExtraBold, fontWeight: "ultrabold" },
],
});
const App = () => (
<PDFViewer
style={{
width: "100%",
height: "100vh",
border: "none",
display: "flex",
}}
>
<Document>
<Page
style={{
fontFamily: "JetBrains Mono",
}}
>
<View>
<Text>++</Text>
</View>
</Page>
</Document>
</PDFViewer>
);
export default App;
Copy the code app and render the app component to the DOM
Expected behavior
PDF should render normally
Actual behavior
App Crashes with error @react-pdf_renderer.js?v=14ef2079:97962 RangeError: Offset is outside the bounds of the DataView
Additional information
Font is downloaded from
https://fonts.google.com/specimen/JetBrains+Mono?query=mono
Environment
- Browser (if applicable):
- React-PDF version: "^3.4.2",
- React version: "^18.2.0",
- Webpack version (if applicable):
Wojciech Maj commented
It looks like you confused React-PDF with @react-pdf/renderer. Please file an issue in their repo instead.