diegomura / diegomura/react-pdf
Render prop method on View does not work for Images
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
The following throws an error: Error: `TypeError: Cannot read property 'width' of undefined`
```
{
// I added this
if (pageNumber === 1) {
return {pageNumber}
}
return
```
Ref: [repl](https://react-pdf.org/repl?code=3187b0760ce02e00408a057025803c450298c0bc300500943807cf805030c00f0022230080b6198531165d400a02180e659a004f003619b006f61622003a0046200099080beed3a70e9aa8035241803b8c0066a831298009c5928c5725e0930003bf0c00e49bcfb315516c52096d4d18007a30980049181e253b4b28000b24081810a4137c37012f461f2b1c6c5c0046226090ca1b28042b306a7d231869710967248c243e24a8002e181280560006001a18791e60006b3e2b1004302500611011102b7e80727911040c2dbf752a00150c1436091ccf6f7b552a30b38be207c6c30d4e553210eadafaaa28a31dc954e0b5242d3912081022fa85415660360004461287b820610023b200056e80c0956438971f09120b087d54aa7087c744f58182a45051060e41d389dd4ce6252d342003f1832c6c3c4c2590c4864b58305328001685c4a2c9f2410f7a6f328a7738339962704eb59b22804ac4ea3a3d510483c6606076180887830002c8f0c0c0248f1555af5751e9cd7d5ea59721e021921b7523abafb110dab0cb7b000dc5d980827b9e20956fb1910d904010f2235404ddeca32c782e002dcd5d6d17ea20b0502b08a1db6fb4c1404b24300900067fa90860181c7d8bb5d900c7a3261e230401031ca4943c111f0c734590832816ab5605b0ee76bbdd2ac797a335abf4b203324356bd4eb9800145ea8b3b420f83c428ee9d2eb74f1c6b686108c7300407c86c18080981b1031e6589402b0172b198719c083ce14a118040dd31c8d0c118170c76c4b078c9078dcb0749f79d1765c633b4676a3ed300002f07458589a024044311e6718e237d5f5bc9348c7f6b1e872dea131ed500607ed5f25cc75826c250365906000154c0074d656d6d4a2c74600043b49136001d0236f632ea7b0407182045c5c4ed7b3b478349f4b4880b75595fca35a3fb023e446d585a3d6348203d326452205196f3115841c9c9a30ca82c00f36225c002ffa8dc75918241c0ed20047b88902516a074829b5809cb9708accf017346148fa9ed3481b5655c37d936a373181dd2ed6c1e194bbda31b1a031cec0e21d76d803d81ae68780036f5b5e30c1ed2b1307198c91098b4916e5af6452dac6d1cb48cc564a038bdb66810348dc560107136896c405bdb2881a7718caa5148edab01605ae68709741d080b0249c046d2636dc04ba6025a388d8903a3748336f33080e52ce3014881dea2eb8c9b2604581d29c4cfd8da9b221c7ad2060df5fa84fed09e68403f2729e16f022c0b1c388c15f0874ada2969cad6a9209fa9a706346ac18cdc2c77ec5c7b498f19d9a73cb5bc58081d8fb421e5b84e0144c87a7180a0602780875b3c2173b11b65200312b1521374ae622dea2c07d9a07996f0a364c871ada2bb575f656089bca67719ec66d25e02e5f387b7a86c2ec84e0724bfcdf24baad43b19c44309784f7640001b8603985d18081250ac17ce20d985a9cba1cf5b63298e522d7b058bb0bb4294c8cf304c798e8d673f25860307ea3371e26031ceb1b2177c1d99634eb9ce694af842616cc95bd74906637db49832378688349bb1a04969cb1d59600ed9f0c0021b8c59d9bc2ac1aac021c6a46d0ccb22072db2991fe98c716de3dd2da1f410581c6902780b8901a171709640708d5bc5091f99d570f40c703a576a75a08305fa05c2613914173d1a860b7c8d8bb0392500012fa3381606b34972b30ce4f85c22c2367441d12d3827110f1aa13c170cf2ea264818af05c1bc19cef0455706ed7f208136f6115a9353a820998294eca0dba9151d2ef568a36236690e7b40076b79e812019c638f01cf7f2f154b81971cb10439103a10b9799da0c0be0441203f20f54fa4c2e6560beb3f436498899987217d88b95d2360a2b01ac2224a1bb1b627208d6d11b7da2c20280e68c83987276531318a284d1e00ac6b93e56c711b29805480d8a62c74ea081ba8d4bea85dfb1733e00921d19d0c9b98ccad4531ead9dbf663e22872b9f7a80bda24c35b03d94b861774691dd12557cdf50d94143a7616f3031027104ab8c370875402e146c8503c578e59c657c6712fad8c406b8fb0cd358b963b4621e33767e2d0cf1874e507ec101265a22c3f6bba028e3882bdc9495f35ca55458814302de3d9181758974e91300c3d40399cd68bb30392c367264d30538cc4c06b6cb5724ba1ce00195d8a265e8b0a363b306e2b5346585b45d45c3cc1b2e31fb0f0022e34d220b3b6ae8789a446ce2cd3a5d2104e5de8c28ce70a117d45b4b02ac1357b92e4db0fca589ccc40f3226b730a172a8c6546c2410c0a72a499976a7156d10c930e58acb952583f545accb8a7b23abba71a5ac2025f094201fa2b6615142a56a156ceacc03fafa84ad4b82330d7fc7a860191413a310224a875b2b582290e4583893d5f0ae35b3526175a3730101789d84c3376d534c3d869cb991b072a09f9090250d456abf6988522d4a3399545c7a2db01832aecd16b96b59c4472a329b423bd4b3018a3ec8ebc096a3ca365601301b08d28497475b68ac6d16add800580d811d134eea8428ad87b3660f1cc0630d42f188743a62ef6a9b8f0e3c709353f0accfa8e4260511c590514353a715fb26cd8a31485514f00ad41567d3eea8247b9cc5c9c5cfb462ceb936d50805aac961a852725811fb63201f609a9d6e3ebf51b015455ad5b5b035604556d7b35a16029e8671b2e6484a54d9dbf4a67875c52f40d800413b6d01bb260190d64a36b20c2128df03a3d940dbb3ac55670d9487873e86221ba17ecf20514cea6add5ec268fd147ca1800216252e9520da076a6a33bc74f1a45766d2d26742d11f016610c1fb577bdc7d4b8f02c118b499886ea7980c1519e98d914921096003fc4474362c17c36b3650d865a1b2f9b8a705583c24f287be48ce238451db5dd69100c6002a320605c08baa93d066b4b32c4ba9ef6aed9ba314c076851ba676cf1d82a199b798cc1f1b696e5ad8599c1dd85807812d5bab5b85ba16fc1fd0aeb8dbc44572ab20c039c8d902639d26f61022236f802ea314aae00c296b1015ad14a51102ac98ce1deb181303dc90d368100cf4a20cdab0a45ea5373953e1b21e2b8c5d5dab6bd5b18a4bce4e686c56afd9db11a5767f2d5ad75c1ae4c71d0eac0bcac24c7f2e8c103c65d24ea2022d9cd54ca39dd96009c6776b0606b3043d4bd8af90a058c51875418816dcf40d871762a55d55bd40a57c0000fcb0262b7d19ac18407a5a3202ac6fd374a0e6ae706fc6dade0221cf5eb75919ca21803e0f693015843a63978d9772ccb20038b067b485c8118395b3003c276358065c606382812d136a469cb0bf62ec5b5edcb19d1c85e055a659c5c8922e5c0b1a84b8d6a19b9ead97942c5dae350541fd6326ac18735950d4dfda0d8e303a021525d440ddc4237d454dc207b4f66ac1775423dcb1ba9982c059438f76c4a17243919329714a173a3e7df643b057cf58952c365b6ad8d22b865601cb9daeab9e93547a213454b62668a500b190128a5813c76f1804c55f1ae17d478d30becccfe88465e2fd500c46a107c529671ec309e31a85ff4cdefd80024ce96c2eacd3f856fc84bb31473869c81d9885f1c338dc83a0d20c408416c0738a68df1464db0568a3c3e8ae45256a134de02df9d02eb5959228339c3cf09938361b290a1065b5866dd44c41e44ff802c93812429d5b8bc5e34934b8cabce1096dd055c1ec1805b5990d47194800065a29bb181802d5b1270838bf862caad62106df09fcc301489b9dac44e4d95b88bf9a8949d825b2911dd681bda89605ed5378255f04ce8795703508ad46d524573df4dc610d59018d5543621a71869c61f78a74ce88adc7420064d931105a59d5946d245394a8ca01843969b71eb183da71f6858886da1186d6a52c4384b83b85bb91bc643f541d1f49209d49a889ac74d6700a8171794c0026d471454e941437fd49864d6f11fd9084d8b19d0099caa5e19b236c53ec505e79135161148f7d421530d80f85b51cf14fc0d1731f318d0301a91078781a607f54b02b0ab0c70a20a216b1499aa45043f1594a10b8d7ed3446e5995ea5b0975c1d0521c5932510535c580fa4570a19371f109f50fd06301181098c4fdb319cc662364111911511a11590b11711f10000996405c135cc90e102904620455a1b31cfd2fce1000025e14e65765a44e759d46c1ca34c4d3822d0f9521d04578df1e086c59a80c1a596215059349423004c0eed91dea40c26c9b42029b89594eecf49d5402cfb9ab0c43bb4498b011fd5932cd5834207a8b187a2665d55a18ce8b85189139b99d28070ac4bb58b8888fcc70de1d261d0c20163553d0d9f61569b53b192d83009888d2435855c0c0cc7e8a75c93395e40ae9b5207cf108e5858ec19ece28ffd864201271774ac1948001341e544ce54df00e9ad1a4dec1670f235edd49d0da1905949d6a500c7286e5d485bcc0508982ce34459b227800a9d49b8840cec4a0da255590e8a15118a991716a0cc5be90f5964000a4cbd4c5ac8c6c108124c144a32e9778f3dd39509263a64079408000944c5d48629313ff5a18811a30b15cb4269968788c38b64188125dad508788ac15f0dc3809b7269c5d098985970ccd84d2505270441facb009f1e4983c0e3da4972a70f090253cc8dca10e49c007b8d85394441141e612e27690a02e8180793af26a43c59d925caf4e102d8c71763378ec8382ba85d2db856c4019499d17780c2e28e84b53ae429cdf2e485b5399034e11002440c2245938320011c32475caf8c40eb54c226570c08228a3453ec238a2d1c86a8a74988678708b926c9ee44c1498aa26184646935b19805c2b78b327bc898f3d148cd543cb89858089742c01974108c6d5c548243de0dec0eccc08119cd957d9258d4b19d6cdf1f888726752a535d553e5c10dee45841786e5ab124bc3873c9a262cb991317548736f1760bf18c3cec8096184ca15c2320710e5590b7db582f99ed6d4e650856a2360365ea5590fcaac12e35b15f1d49818068469ae9e1dd927b402c3eca08a180b0f31a510a13fd615e605c1843bd42dd9d59ec515f68554ba9d6129d8522782b5a35132849594401b142593d8a60e33bb236ce2a10cec5763cf4e43eb1a6bb0db886018f4ce8c25a885a26719e9664cd395817ceab2c8c00bb2f815531fce0b5c5cb1622778ed13accd34c3d7d62d7b8c000697d9d850732dc261e88f197657534a8904b791542d4b01982a6c5816f07b8fab3992b88d2e94c70fcaa8c2926e49f0df02a54c5ee401c468ff88d4c224a0000396f1658d95230c73ea4a5846412b82aa328ea6e49ada3ce9afbdab0089a2dcc2e112f8300a02e53e7c0a27f3200aa4b18c424d2cf277177826c7fc4030620fd8628fd4f1df58449127f4433a02e73245e9a673f69304f394c1ed0934632e5b6a12c9c6137c1a422ae53db1d5997007d5e8a3c5bd7a9d55fa10005008001fa2d09b49ec17023236bae4ca826c8a93f856544b4387a45d1f697ed5f0e4a1001891c9264b852d9ce2da2ed862c5e8f15ab5375d134386e59683644d8f24d1ad202f8af8a08b01c08f0935c849a98e535a54982697f2a33e73b28daaf630e80e26789156d08104b28498f850561a780001f9fa178df0be6502b7142b934c181d556f0a7ad60b08a64d25ab905293a3f0bf1dd1859590dc1471f194e30e874d148c2c9c93d91c3a1a07374c1089b243d01d823621a7bac5604088438bc2ec8839c29614780a2c358fd8a19731072dc1fb3a2949267be406697ec7d3f682e98a8441775a6d895c487e51cba717b993b43a6783f0d95c7978d1b2a6c74bff863b3981d16da678a580f4cc996809436c68c2bd674bcb56800df04906ed2ec4935dc8a89418ed8454633e299e85751715a8e85ab5aa5261d69c8b71527173b96ac3c1e2413ad07716f0f71bf06440051bae284c46719d5b6d8c3473b72545a9c73a095dcb18d508a73fd8930b00a1d80905dda51242a4a3370db5804857992ddb04c5f694b1a92d5d5091d17f2fb406274095bbd15f5463045113af135ad531d853b9d9dcd0a11fcf5a1d9ee58b30a97b3725a033da680d44f46070064364ba1ab15db418714d9aab9ed5e85cb879213a93a74ce46f4667a9880a99c8be979b4205bcf814aa342839c68ac0e84588bc55d1928d2a440ec88661d46c5efb7f9659058df1866c0011a4d908c0e9b22709da383bd1a4311b39480010a001e49210d9529ac84bb4658c87fbb3c8925808d51b0f354058c2498b4cf7ac15cc9715818c0a361c00aa42390c53826c0e6059834446933a001096f0272101285971ad1bbd62c278440e255a9fba11830bea1ac659967393d8b2e0449cea17486d5b1811bc15235eb22a5bc912575dc38e419e395b0638fcc62627bf56f1f83f60a8871c516b195da91b7420d863d3842d9c383c29744d3b79f14c2c7d46003db8e69213bac67f18680cbdfd9a50bb2438a9c4f91244318887f2c342169d14eb621352f25980e6a7c0bcd193309ae58f96045bc0cb8586c0a6bbf11d601c86923187d621519e9b705932935e088b46ba698833621a755b06f4b041d1193efa6b5fa8600b80440e167800bb81935687b28b42014afc8e03be9b572368db7315f9f57d35aea6e5dfdce99013c35050a00b692df885c2da9db8301949560c642ab76ab5818b586e528ebb695217c3928aad77913552c026e11fb51ccae95ea4d56ab02ac652004acab8adbb293a59eb5557e513ca5c101d7d35c7e48715b6ff489ad26218fba0fa6a4a3d28cd60f0dc183a44b8cb0ed992aacd5092ad376c936e7d980aa2860856c66932d9aa0901c8dac581967124463d1338ebbb9b1ca09e0b380862227997a263f44442fd1629243bdd05b946d0b18f5bb73332a617f273480f401f180752388390a031a0b3c77421ab1a99fb922240e1541d82bdd99209d58b8c8d8f659f1b9991b78e6748d45663390d2070500154514c9dc3c97dab98e34c0af2b00737c59949087f795a9dd07c88f93b1e1a338e95a4ced9cf4899cdb0e9a4bc6d64afcb93bc3cb80af2c71f82f48ec9775c60fb6d79775c35fcc82b689a703c4809964889705cada08b9b49800974d13c68df893850485abdb7ad0f1890283a3a01a5c696233d4ed83fc5eb0197f9546339d47dd0c39ed26011fc63bb1cb0952cd9b2b2a49b899acc0288fac9ea5e61759c25a85e3cdd51035145d1a79a97d09ec07b56d1dd059ceb4487882c866935259d5da95906956b77c063d8f8181999a2d978dca08500627963cf22810005706003c16d17c0068f341e38400041a666b91486a7fe5f32a519805bca32ba9c83ce2a70479fb09290ad195c60b5222dd7cf119b39c764b70ccef6d137dc60198e5a7f13f7f34f4285660f0b3559dd9769853092f99ae844644d9a164a91e529800f48ad2d174c6148d321c8c41b9c4f7e37f266706ed82db54d268d25a53549c7e1e46ea9332c253341495dc8115426e0fc26e12d5b2f1ae0f200a1a906c1ed41c02409c0da97216e08d28d94c3780040d21fc0481c803380000c00048ae1dc005f39122035e65f170e5f59154055e410081a90cc05002c06904201e10de3e01e0e801803c3d80081f39be1ad97f3641816aa5ec09c0380e47d88841b608e62010c1170940b61cc2200111b607a0a005c02017a0221975580e40f810c48d18016400e4c20310670c3e440940c21e304a000198c20432001f44e0001a5740000d8400c9a001d4401e31e405489414bf1812be000340013878178d78d0d0a004c0b60c81fc0ddec81edaa275a9700c95f50c943a0eedb3f851300fdf281140541fa1821340c065bd35c4e1a6bfa14bf060ba60ff2a88cdd01d6dfa1ebfcfe4212ff35c513e180471714fe1ff281541cc20b0c4177e42053e5000a50310300fd0504800058ba6e7e5e307897a6db01738eb923e000dfcb5b16b822020f8c00b6021f02f847c380dff0e01ef0f86fff4d02003801a008182824a015a81805740c00f008e315809019a00db0b98c00d7f2802dfc600e00b181e02a3e7985ffb902f7e9c05205200401fd0726974c5813947106503901ac05404ff0301580d0fb87c27e5ff1ff96a18819c02905d022815d311058820609009083403601ba0ad81670d882602101303841280b4052824e07b10802ca0a7249a3505f81cc2df12d05a117883945d0375d3b0eff01827fdb417e0b000bfdf86add11038838603c0f504701d9096c1f069817f26409906483c21ec0ce06825e219c05306d03e81314460574d400eb04d82602e6002d5b07e03280fcf2978a42f08eac2343801b6026c5bf08600e0fa0b486883c8125059066811401c0e0229fcf219403100980fa03003187580ba03d07e80cc20a1700cc04203ec0b60ca01942360db02a84d83cc2f80a9fb7c0272d286001400b803406b617bd6c0bef2a005a0d00d680a42bbcc8040000)
It starts working fine when Image is not used in the render prop. What is a work around for this?
Contributor guide
Assessment
This issue has not been assessed yet.