<Image src={src}/> returned from render function crashes react-pdf

[vitaliiznak]

Describe the bug When returning an <Image source={logo}/> component from a render function react-pdf crashes with an error

TypeError: Cannot read properties of undefined (reading 'width')
    at renderImage.js:36
    at _pipe.js:3
    at _pipe.js:3
    at _arity.js:10
    at renderImage (renderImage.js:58)
    at _curryN.js:34
    at _arity.js:10
    at cond.js:42
    at _arity.js:10
    at _pipe.js:3
    at _pipe.js:3
    at _pipe.js:3
    at _pipe.js:3
    at _pipe.js:3
    at _pipe.js:3
    at _arity.js:10
    at renderNode.js:80
.........

To Reproduce

import logo_code from './assets/logo.png';
....
return (
<Document>
  <Page size="A4">
    <View fixed render={({ pageNumber }) =>
      <Image src{logo}/>
    } />
  </Page>
</Document>
)

Expected behavior The document renders the same way regardless if the children are returned from the render method or supplied as children to the component.

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome Version 96.0.4664.45 (Official Build) (64-bit)
• React-pdf version "^2.0.21"

[vitaliiznak]

The exception is raised because the Image node was not resolved ( binary data for the image is not fetched/resolved).

Here, resolveAssets function gets a DOM tree and for each Image, node resolves binary src attribute to binary data representation objects. . However, because DOM tree does not contain dynamic nodes yet, ( the nodes from render prop <View render={() => <Image> /* will create dynamic node*/ }> ) it is not resolved.

Dynamic nodes are added on the resolvePagination stage binary assets are resolved to respective Image representation objects.

Will the addition of resolveAssets step here fix the issue? (Edit: ops it is not async function)

[vitaliiznak]

render prop functionality is limited due to the pagination, layout resolution and those steps order. Some limitations:

• styles are not inherited;
• styles composition syntax does not work <View style={[style1, style2]}/>
• Image, Svg, Link, maybe some others tags are not working.

Would it be possible to document the render function limitations?

[JustinHallquist]

Just a note that this issue is present in v2 only and prevents upgrades from v1 when using the render prop which does go against this release note sentimentality:

TL;DR - React-pdf 2.0 is backwards compatible with v1, so you don't need to change anything from your existing project to start using it. If you're not interested in what changed internally, you can jump straight to the what's new or the FAQ section.

On the flip side, if you desperately need this functionality and are not using the v2 features, you can downgrade to v1 for the time being until this gets sorted

[gjovanov]

Hey gents, we are using v2 features and PDF templates are written and owned by other teams, meaning we don't have control over them.

Any plans to have this fixed in v2? Thanks.

[gjovanov]

Hey @vitaliiznak, @JustinHallquist: are you aware of any workaround to dynamically render a logo on each page, with v2? Tnx.