question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"Cannot enlarge memory arrays" when Page components is used with wrap prop

See original GitHub issue

First of all, awesome work!

OS: Ubuntu Linux 16.04

React-pdf version: 1.0.0-alpha.15

Description: When rendering a small pdf on client-side it renders ok. If i try to add wrap prop on my Pagecomponent, the pdf didn’t render and i got this message on dev console: Cannot enlarge memory arrays. Either (1) compile with -s TOTAL_MEMORY=X with X higher than the current value 134217728, (2) compile with -s ALLOW_MEMORY_GROWTH=1 which allows increasing the size at runtime but prevents some optimizations, (3) set Module.TOTAL_MEMORY to a higher value before the program runs, or (4) if you want malloc to return NULL (0) instead of this abort, compile with -s ABORTING_MALLOC=0

How to replicate issue including code snippet (if applies):

Component file:

class Profile extends Component {
  render () {
    return (
      <div>
        <Document style={{height: '500px', width: '100%'}}>
          <Page size="A4" style={styles.page} wrap>
            <View style={styles.header} fixed>
              <Image src='/logo.png' />
            </View>
            <View>
              <Text style={styles.mainTitle} >Profile</Text>
              <Text style={styles.titleDetail}>{new Date().toLocaleDateString('pt-BR', {day: 'numeric', month: 'long', year: 'numeric'})}</Text>
            </View>
            <View style={styles.section}>
              <Text>Section #1</Text>
            </View>
            <View style={styles.section}>
              <Text>Section #2</Text>
            </View>
          </Page>
        </Document>
      </div>
    )
  }
}

App.js

import { Profile } from 'some-path'

...

<Route path="/mypdf" exact={true} component={Profile} />

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

11reactions
ghostcommented, Nov 15, 2018

I’m running into the same issue. The work around I’m currently using because I can’t think of a better way, is to modify node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js. Around line 460 there is the integer 134217728. I’m increasing it and it gets around the issue.

Not the best solution, and definitely not permanent since it will just get erased when the package is updated. It at least is a work around the issue although it generates a warning about the heap size.

I’m open to a more permanent solution.

7reactions
naomiajacobscommented, May 22, 2019

@diegomura I’m also running into this - checking to see if there’s an update on when a fix for this would be released. Thanks for the help!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Everything you wanted to know about arrays - PowerShell
An array is a data structure that serves as a collection of multiple items. You can iterate over the array or access individual...
Read more >
How To Manage State with Hooks on React Components
To explore Hooks, you'll make a product page with a shopping cart, then display the initial values based on the state. By the...
Read more >
Arrays - The Modern JavaScript Tutorial
It is not convenient to use an object here, because it provides no methods to manage the order of elements. We can't insert...
Read more >
Cleanup memory leaks on an Unmounted Component in ...
Because it's the async promise call, so you must use a mutable reference variable (with useRef) to check already unmounted component for the ......
Read more >
React Best Practices – Tips for Writing Better React Code in ...
Two years ago, I started to learn and use React. ... that every item in both Arrays has an id property, the component...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found