Cannot read property 'layout' of null

[bkoltai]

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

[bkoltai]

My documents rendered fine in alpha.12. After upgrading, I did a global replace for @react-pdf/react-pdf to @react-pdf/renderer and no other change and I started to see this error

[diegomura]

Could you provide a snippet that replicates this error?

[ybbond]

happenned to me too. I am upgrading from 12 to 14 too. I tried yarn remove @react-pdf/renderer and yarn remove @react-pdf/react-pdf@alpha.12.0.0 also tried reinstall yoga-layout, no change.

what kind of snippet do you require @diegomura ?

edit:

forget to mention, I try the code provided in this repo's readme.md (how it works) and it works.

[ybbond]

I tried a line-by-line debuggin approach, and I found that this code:

will run (call an iframe with pdf data blob to the DOM).

while this:

is not working, and will generate this error:

    at VM5007 bundle.js:35037
    at Array.map (<anonymous>)
    at GlyphGenerator.generateGlyphs (VM5007 bundle.js:35035)
    at LayoutEngine$$1.layoutParagraph (VM5007 bundle.js:35320)
    at LayoutEngine$$1.layoutColumn (VM5007 bundle.js:35295)
    at LayoutEngine$$1.layout (VM5007 bundle.js:35281)
    at TextEngine.layout (VM5007 bundle.js:23841)
    at Text.measureText (VM5007 bundle.js:24051)
    at External.data (VM5007 bundle.js:215230)
    at Array.eval (eval at buildJSCallerFunction (VM5007 bundle.js:206450), <anonymous>:1:86)
    at Array.ASM_CONSTS (VM5007 bundle.js:205558)
    at _emscripten_asm_const_iiididi (VM5007 bundle.js:205566)
    at Tg (VM5007 bundle.js:208476)
    at Rg (VM5007 bundle.js:208472)
    at Qg (VM5007 bundle.js:208469)
    at Pg (VM5007 bundle.js:208463)
    at we (VM5007 bundle.js:207965)
    at Yd (VM5007 bundle.js:207819)
    at Td (VM5007 bundle.js:207428)
    at He (VM5007 bundle.js:208066)
    at Yd (VM5007 bundle.js:207550)
    at Td (VM5007 bundle.js:207428)
    at He (VM5007 bundle.js:208066)
    at Yd (VM5007 bundle.js:207550)
    at Td (VM5007 bundle.js:207428)
    at _d (VM5007 bundle.js:207839)
    at kh (VM5007 bundle.js:208525)
    at qj (VM5007 bundle.js:209051)
    at oj (VM5007 bundle.js:209043)
    at XC (VM5007 bundle.js:214672)
    at Bound.<anonymous> (VM5007 bundle.js:206483)
    at Bound.<anonymous> (VM5007 bundle.js:215243)
    at Bound.prototype.(:3000/anonymous function) [as calculateLayout] (http://localhost:3001/static/js/bundle.js:215142:22)
    at SubPage.wrap (VM5007 bundle.js:23000)
    at Page._callee$ (VM5007 bundle.js:23414)
    at tryCatch (VM5007 bundle.js:192890)
    at Generator.invoke [as _invoke] (VM5007 bundle.js:193124)
    at Generator.prototype.(:3000/anonymous function) [as next] (http://localhost:3001/static/js/bundle.js:192942:21)
    at step (VM5007 bundle.js:42899)
    at VM5007 bundle.js:42917
    at new Promise (<anonymous>)
    at new F (VM5007 bundle.js:51643)
    at Page.<anonymous> (VM5007 bundle.js:42896)
    at Page.wrapPage (VM5007 bundle.js:23431)
    at Document._callee5$ (VM5007 bundle.js:21728)
    at tryCatch (VM5007 bundle.js:192890)
    at Generator.invoke [as _invoke] (VM5007 bundle.js:193124)
    at Generator.prototype.(:3000/anonymous function) [as next] (http://localhost:3001/static/js/bundle.js:192942:21)
    at step (VM5007 bundle.js:42899)
    at VM5007 bundle.js:42917

notice the only difference is the {'\n\n'} in the end of the <Text /> content.

[bkoltai]

Sorry I didn't have a good code snippet. I noticed that I'm getting the error on alpha 12 as well. I'm downgrading to alpha 10 to see if the issue still persists.

[bkoltai]

Another observation: I wasn't able to reproduce the error locally that I was seeing on my production server, so it may be OS specific

[bkoltai]

I put a debugger to try to see the state when the run.attributes.font is null and it looks like it's when the string is an empty string, which maybe aligns with @ybbond's issue with \n\n. I'm seeing the issue locally now with alpha 10.

[bkoltai]

I don't get the same error with alpha 8

[diegomura]

Thanks guys. So apparently is an issue that ha been present for awhile now, and not introduced in the last version, right?
I remember looking for the \n\n case when building textkit, but maybe something broke that.
Thanks for the snippet @ybbond . I needed some way of replicating it, since I don't get the error.
I'll work on this soon

[ybbond]

hei, I found a weird case regarding the \n\n (or just single \n).
what made my code won't render the iframe and producing forementioned error log is empty line.
I mean, this:

<Text>{`
${varName}`}</Text>

will not render, but add a single space to the first line becoming:

<Text>{`[single_space]
${varName}`}</Text>

it will render.
weird. will edit when I can screenshot my code.

I meant, in my previous code, I think a line only containing \n acts as "a line without content", but add a space becoming \n will make it has at least a character (a space)

[klis87]

I also noticed this issue. I need to render dynamic value in pdf from textarea The problem happens with two consecutive line breaks.

so this works - 1st line↵2nd line, while this fails - 1st line↵↵2nd line

so this confirms @ybbond observation, that this happens when there are empty lines in a text

[nicolasraynaud-millevolts]

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

[bkoltai]

Here is a simple repro for this (which I'm still seeing on alpha.18)

const str = `
`

const Quixote = () => (
  <Document>
    <Page style={styles.body} wrap>
      <Text style={styles.header} fixed>
        {str}
      </Text>
    </Page>
  </Document>
);

I haven't been able to test this with the latest commit that fixed the empty string, which may address this case. How would I test an unreleased version in my package.json? Happy to test with unreleased, just don't know the correct way.

[diegomura]

Thanks @bkoltai

There's no neat way of use an unrealeased version yet. You can always use the github url in package.json, but what this library actually publishes is the builds. I guess if you run yarn install && yarn build on your node_modules/@react-pdf/renderer, but cannot promise it will work.

However, I thing this issue is related to textkit and not with the fix I did the other day

[diegomura]

Fixed react-pdf/textkit#1

TODO:

• Write textkit tests
• Apply changes to folio/textkit repo
• Publish and update react-pdf textkit dependency
• Test on more examples

[diegomura]

Fixed in new 1.0.0-alpha.19 version