wojtekmaj / react-pdf

Display PDFs in your React app as easily as if they were images.

Home Page:https://projects.wojtekmaj.pl/react-pdf

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Text Component Crash the app when rendering ++, when using JetBrains Mono Font

FatahChan opened this issue · comments

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):

It looks like you confused React-PDF with @react-pdf/renderer. Please file an issue in their repo instead.