react-pdf: Cannot read property 'layout' of null

React-pdf version: 1.0.0-alpha.14

Description: After upgrading, I now see the following error when trying to render any document. I’m not setting any custom fonts


Uncaught (in promise) TypeError: Cannot read property 'layout' of null
    at GlyphGenerator.js:63
    at Array.map (<anonymous>)
    at GlyphGenerator.generateGlyphs (GlyphGenerator.js:61)
    at LayoutEngine$$1.layoutParagraph (LayoutEngine.js:119)
    at LayoutEngine$$1.layoutColumn (LayoutEngine.js:94)
    at LayoutEngine$$1.layout (LayoutEngine.js:80)
    at TextEngine.layout (react-pdf.browser.es.js:3662)
    at Text.measureText (react-pdf.browser.es.js:3872)
    at External.data (entry-common.js:221)
    at Array.eval (eval at buildJSCallerFunction (nbind.js:1449), <anonymous>:1:86)
    at Array.ASM_CONSTS (nbind.js:557)
    at _emscripten_asm_const_iiididi (nbind.js:565)
   ...

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 16 (14 by maintainers)

Most upvoted comments

If it can help someone, here is a small code to make a safe Text component (really improvable):

import {
  Text as UnsafeText
} from "@react-pdf/renderer";

function safeText(text) {
  const str = text
    ? Array.isArray(text) ? "" + text.join("") : "" + text
    : "";
  return str
    .replace(/\n\n/gim, "\n \n")
    .replace(/\n\n/gim, "\n \n")
    .replace(/ $/, " ");
}

function toSafeText(Component) {
  return function({ children, ...props }) {
    return <Component {...props} children={safeText(children)} />;
  };
}

const Text = toSafeText(UnsafeText);