React-pdf: React-pdf 1.2.1 not working on codesandbox.io

[modemmute]

When testing for some bugs I'm experiencing I tried react-pdf on codesandbox.io.

As soon as you import any part of @react-pdf/renderer to the page you get the following error:
"Potential infinite loop: exceeded 10001 iterations."

https://codesandbox.io/s/308l7yox21

[Carr1005]

I got the same issue even I switch to the early version.

[diegomura]

Yes. I'm aware of this. I think this was introduced when we switch from yoga-layout to yoga-layout-prebuilt, but not sure. This is not something specific to 1.2.1 either.

The error is very cryptic and I would love the lib to work on codesandbox, but I didn't have time yet to take a look at what's going on here. The best way to identify what's going on would be knowing between which versions this got broken, and then seeing the diff of those versions.

Keeping this open for further research

[diegomura]

In the meantime, disabling Infinite Loop Protection in the sandbox.config.json file makes this error go away. However, the blob does not get rendered inside the iframe, which is weird. IF you open the blob in another tab you can see the pdf document just fine. Also this seems to be just a Chrome issue. I tried it on Firefox and everything is OK.

[DuncanMacWeb]

We have also been experiencing this error in Firefox. In Firefox, when you accept the prompt to stop a long-running script...

... it produces a long stack trace that appears to be linked to yoga-layout(-prebuilt). Sorry about the horrendous length! Let me know if a stack trace from source maps would be useful (I didn’t work out how to get it but can dig in some more).

This may be related to / the cause of the bug in IE (#413), but I haven’t been able to extract a stack trace in IE yet.

| With yoga-layout-prebuilt: | With yoga-layout (SDFE/react-pdf#use-yoga-layout):
Run npm i github:SDFE/react-pdf#use-yoga-layout-dist to try it |
|------------------------------|---------------------|
| Error: Script terminated by timeout at:
[email protected]:35264:21
[email protected]:35278:12
finalizeLineFragment/<@bundle.js:34277:28
layoutParagraph/</<@bundle.js:34345:7
layoutParagraph/<@bundle.js:34344:5
[email protected]:34362:23
typesetter/</</<@bundle.js:34378:9
typesetter/</<@bundle.js:34377:14
compose/</<@bundle.js:33341:14
compose/<@bundle.js:33340:12
[email protected]:33366:5
[email protected]:25080:7
[email protected]:25095:7
./node_modules/yoga-layout-prebuilt/yoga-layout/dist/entry-common.js/module.exports/</<@bundle.js:99073:28
@bundle.js line 90296 > eval:1:86
./node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js/</</ASM_CONSTS<@bundle.js:89404:12
[email protected]:89412:28
[email protected]:92559:1
[email protected]:92555:1
[email protected]:92552:1
[email protected]:92546:1
[email protected]:92048:1
[email protected]:91902:1
[email protected]:91511:1
[email protected]:92149:1
[email protected]:91633:1
[email protected]:91511:1
[email protected]:92149:1
[email protected]:91633:1
[email protected]:91511:1
[email protected]:92149:1
[email protected]:91633:1
[email protected]:91511:1
[email protected]:92149:1
[email protected]:91633:1
[email protected]:91511:1
[email protected]:92149:1
[email protected]:91633:1
[email protected]:91511:1
[email protected]:92149:1
[email protected]:91633:1
[email protected]:91511:1
[email protected]:92149:1
[email protected]:91633:1
[email protected]:91511:1
[email protected]:91922:1
[email protected]:92608:1
[email protected]:93134:1
[email protected]:93126:1
[email protected]:98755:1
makeMethodCaller/<@bundle.js:90329:57
./node_modules/yoga-layout-prebuilt/yoga-layout/dist/entry-common.js/module.exports/<@bundle.js:99086:12
./node_modules/yoga-layout-prebuilt/yoga-layout/dist/entry-common.js/module.exports/patch/prototype[name]@bundle.js:98985:14
[email protected]:22572:5
[email protected]:24677:15
[email protected]:38363:37
[email protected]:38597:22
defineIteratorMethods/</prototype[method]@bundle.js:38415:16
[email protected]:37905:30
step/<@bundle.js:37916:13
[email protected]:49373:22
notify/<@bundle.js:49390:30
[email protected]:47960:9 | Error: Script terminated by timeout at:
[email protected]:35264:21
[email protected]:35278:12
finalizeLineFragment/<@bundle.js:34277:28
layoutParagraph/</<@bundle.js:34345:7
layoutParagraph/<@bundle.js:34344:5
[email protected]:34362:23
typesetter/</</<@bundle.js:34378:9
typesetter/</<@bundle.js:34377:14
compose/</<@bundle.js:33341:14
compose/<@bundle.js:33340:12
[email protected]:33366:5
[email protected]:25080:7
[email protected]:25095:7
./node_modules/yoga-layout/dist/entry-common.js/module.exports/</<@bundle.js:99073:28
@bundle.js line 90296 > eval:1:86
./node_modules/yoga-layout/build/Release/nbind.js/</</ASM_CONSTS<@bundle.js:89404:12
[email protected]:89412:28
[email protected]:92559:1
[email protected]:92555:1
[email protected]:92552:1
[email protected]:92546:1
[email protected]:92048:1
[email protected]:91902:1
[email protected]:91511:1
[email protected]:92149:1
[email protected]:91633:1
[email protected]:91511:1
[email protected]:92149:1
[email protected]:91633:1
[email protected]:91511:1
[email protected]:92149:1
[email protected]:91633:1
[email protected]:91511:1
[email protected]:92149:1
[email protected]:91633:1
[email protected]:91511:1
[email protected]:92149:1
[email protected]:91633:1
[email protected]:91511:1
[email protected]:92149:1
[email protected]:91633:1
[email protected]:91511:1
[email protected]:92149:1
[email protected]:91633:1
[email protected]:91511:1
[email protected]:91922:1
[email protected]:92608:1
[email protected]:93134:1
[email protected]:93126:1
[email protected]:98755:1
makeMethodCaller/<@bundle.js:90329:57
./node_modules/yoga-layout/dist/entry-common.js/module.exports/<@bundle.js:99086:12
./node_modules/yoga-layout/dist/entry-common.js/module.exports/patch/prototype[name]@bundle.js:98985:14
[email protected]:22572:5
[email protected]:24677:15
[email protected]:38363:37
[email protected]:38597:22
defineIteratorMethods/</prototype[method]@bundle.js:38415:16
[email protected]:37905:30
step/<@bundle.js:37916:13
[email protected]:49373:22
notify/<@bundle.js:49390:30
[email protected]:47960:9
GlyphString.js:202 |

[DuncanMacWeb]

Ooh exciting! This appears to have been resolved by #474. You can test this by npm i github:SDFE/react-pdf#474 :)