App crash after import from react-pdf #496

ditiz · 2019-12-11T08:55:19Z

Before you start - checklist

I followed instructions in documentation written for my React-PDF version
I have checked if this bug is not already reported
I have checked if an issue is not listed in Known issues
If I have a problem with PDF rendering, I checked if my PDF renders properly in Mozilla Firefox -> not a pdf problem

Description

Short description of the bug you encountered.

When I add the line
Just after I create a new app with create-react-app and add with npm react-pdf,
If import from react-pdf like that :
import { Document } from "react-pdf"

My app can't compile anymore.

Steps to reproduce

Steps to reproduce the behavior:

Create a new app with create-react-app
npx create-react-app test-react-pdf
Install react-pdf
npm install react-pdf
Add in src/App.js an import from react-pdf
import { Document } from "react-pdf"
Run npm start and it should display something like:

<--- Last few GCs --->

[47073:0x102808000]    31515 ms: Scavenge 1382.5 (1423.4) -> 1381.9 (1423.9) MB, 4.6 / 0.0 ms  (average mu = 0.125, current mu = 0.063) allocation failure
[47073:0x102808000]    31519 ms: Scavenge 1382.7 (1423.9) -> 1382.1 (1424.4) MB, 3.3 / 0.0 ms  (average mu = 0.125, current mu = 0.063) allocation failure
[47073:0x102808000]    31524 ms: Scavenge 1383.2 (1424.4) -> 1382.6 (1424.9) MB, 3.1 / 0.0 ms  (average mu = 0.125, current mu = 0.063) allocation failure


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x1d21277dbe3d]
Security context: 0x2cd62ef9e6e9 <JSObject>
    1: SourceMapConsumer_allGeneratedPositionsFor [0x2cd6b4a57591] [/Users/mypcname/Dev/test-react-pdf/node_modules/@babel/core/node_modules/source-map/lib/source-map-consumer.js:~178] [pc=0x1d212805103b](this=0x2cd682a82291 <BasicSourceMapConsumer map = 0x2cd6d22b6131>,aArgs=0x2cd638193081 <Object map = 0x2cd6d22b5529>)
    2: /* anonymous */(aka /* a...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x10003d035 node::Abort() [/usr/local/bin/node]
 2: 0x10003d23f node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0x1001b8e15 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 4: 0x100586d72 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
 5: 0x100589845 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/usr/local/bin/node]
 6: 0x1005856ef v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
 7: 0x1005838c4 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
 8: 0x10059015c v8::internal::Heap::AllocateRawWithLigthRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
 9: 0x1005901df v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0x10055fb24 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/usr/local/bin/node]
11: 0x1007e7e04 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
12: 0x1d21277dbe3d
13: 0x1d212805103b

I also create a repo with the problem https://github.com/ditiz/pdf-viewer
To use it:

git clone https://github.com/ditiz/pdf-viewer.git
npm install
npm start

Expected behavior

What you expected to happen?
Can use react-pdf without crash the app

Additional information

I tried to use more ram with:
react-scripts --max_old_space_size=4096 start

It's change nothing

If applicable, add screenshots (preferably with browser console open) and files you have an issue with to help explain your problem.

Environment

Browser (if applicable) [e.g. Chrome 57, Firefox 59]: not used
React-PDF version [e.g. 3.0.4]: 4.1.0
React version [e.g. 16.3.0]: 16.12.0
Webpack version (if applicable) [e.g. 4.16.2]: 4.41.2

The text was updated successfully, but these errors were encountered:

brentmitch · 2019-12-16T19:12:21Z

I had the same error when I upgrade to react-scripts 3.3.0. Adding the following to the .env.development file got things running:

GENERATE_SOURCEMAP=false

brentmitch · 2019-12-16T23:00:33Z

The issue appears to be caused by the a recent change to Create React App to make the VSCode debugger able to debug code in node_modules of CRA apps.
See:
https://github.com/facebook/create-react-app/pull/7022/files

The problem went away when I experimentally reverted the above change. Of course this isn't a viable way to fix the issue.

I wonder if there is as way around the issue using craco (Create React App Configuration Override)?

I also wonder if other React components are having this issue?

brentmitch · 2019-12-17T15:56:57Z

There is an issue for Create React App. See: facebook/create-react-app#8130 The user reporting the issue isn't using react-pdf but they are using pdfjs-dist.

They found a tempary fix by adding:
react-scripts --expose-gc --max-old-space-size=8192
to the scripts in package.json.

This worked for us also.

robsco-git · 2019-12-18T09:28:17Z

Please see #498 (comment) - a response to the same issue.

Raysharr · 2019-12-27T16:58:33Z

I found that if you import components from
import { Document, Page } from 'react-pdf/dist/entry.webpack';
everything is working fine.
This import delegates rendering work to a different thread which apparently fixes issues with memory allocation limit.
I hope this helps :).

th-m · 2019-12-28T21:41:57Z

Here is my package json

{
  "name": "pdf-2-wc",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.8.1",
    "@material-ui/icons": "^4.5.1",
    "@material-ui/lab": "^4.0.0-alpha.37",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.0.25",
    "@types/node": "^12.12.22",
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.9.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0",
     "react-pdf": "^4.1.0",
    "typescript": "^3.7.4",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Spun up with cra using typescript.

It will sit and spin on Starting the development server... until I kill it. I ended up having to.

I ended up removing the package and just using a script tag to import the lib from the index.html file.

Raysharr · 2019-12-28T23:09:24Z

I am using
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-pdf": "^4.1.0",
It can't get past this... tried everything mentioned above...

The only thing that I did not mention is:

I use cra with typescript template

vamsi920 · 2020-01-03T07:24:17Z

I had the same error when I upgrade to react-scripts 3.3.0. Adding the following to the .env.development file got things running:

GENERATE_SOURCEMAP=false

where is .env.developemt present

markalexander · 2020-01-05T09:32:43Z

@vammu920 .env.development should be in the root of your project (you might have to create it).

Also, I think that will only be used for start; you'll have to make .env.production with the same contents so that it works with build.

I haven't tested this solution, but that's my understanding of where they go.

aprilmintacpineda · 2020-01-07T00:49:45Z

Ran into this as well. #496 (comment) suggestion worked but that obviously makes debugging a bit more difficult because sourcemaps help in debugging in the browser...

Mahmo0odsalah · 2020-01-09T12:12:41Z

I had the same error when I upgrade to react-scripts 3.3.0. Adding the following to the .env.development file got things running:

GENERATE_SOURCEMAP=false

That's awesome man, I've been stuck for hours. Thank you.

LucasNeevs · 2020-03-14T20:12:40Z

There is an issue for Create React App. See: facebook/create-react-app#8130 The user reporting the issue isn't using react-pdf but they are using pdfjs-dist.

They found a tempary fix by adding:
react-scripts --expose-gc --max-old-space-size=8192
to the scripts in package.json.

This worked for us also.

WONDERFULL TIP!!!!! I'ved the same error in the project i'm working now and I applied this command in the scripts > test. Now, everything is running perfectly. Thanks bro!

bluesealjs · 2020-06-06T11:13:09Z

I had the same error when I upgrade to react-scripts 3.3.0. Adding the following to the .env.development file got things running:

GENERATE_SOURCEMAP=false

adding GENERATE_SOURCEMAP=false to build command i.e. "GENERATE_SOURCEMAP=false react-scripts build", fixed the app which was getting failed earlier in Netlify

NguyenKyThinh94 · 2020-06-20T09:05:11Z

I had the same error when I upgrade to react-scripts 3.3.0. Adding the following to the .env.development file got things running:

GENERATE_SOURCEMAP=false

not work with me :(

Georgeevergreen0 · 2020-07-08T23:28:55Z

When set to false, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines.

For CRA in .env
GENERATE_SOURCEMAP = false

For webpack config
devtool: false

brianqian · 2020-07-09T13:38:20Z

Another solution that I'm going with is downgrading to react-scripts 3.2

facebook/create-react-app#8096

wojtekmaj · 2021-04-01T10:22:10Z

Please kindly check React-PDF v5.3.0-beta.2, in which improvements regarding loading PDF.js worker were made.

These changes should result in 10-15 seconds faster Webpack builds, as well as you should be able to use Webpack entry file in Create-React-App, without the need of using external CDN for hosting worker.

Let me know what you think in #748!

* Mobie scrollable tab bar from : https://codesandbox.io/s/material-demo-forked-2yw9t?file=/demo.js:990-1097&resolutionWidth=320&resolutionHeight=675 * react-pdf fix for create-react-app: wojtekmaj/react-pdf#496

brentmitch mentioned this issue Dec 18, 2019

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory #499

Closed

wojtekmaj added help wanted Extra attention is needed question Further information is requested labels Dec 21, 2019

wojtekmaj mentioned this issue Dec 21, 2019

npm error code 134 #498

Closed

This comment has been minimized.

Sign in to view

wojtekmaj mentioned this issue Jul 24, 2020

react-pdf in antd-pro (umi dev) causes webpack to run out of memory #603

Closed

wojtekmaj mentioned this issue Apr 1, 2021

Use file-loader, not worker-loader, for default Webpack entry #756

Merged

wojtekmaj closed this as completed in #756 Apr 1, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

App crash after import from react-pdf #496

App crash after import from react-pdf #496

ditiz commented Dec 11, 2019 •

edited by wojtekmaj

Loading

brentmitch commented Dec 16, 2019

brentmitch commented Dec 16, 2019 •

edited

Loading

brentmitch commented Dec 17, 2019

robsco-git commented Dec 18, 2019

Raysharr commented Dec 27, 2019 •

edited

Loading

th-m commented Dec 28, 2019 •

edited

Loading

Raysharr commented Dec 28, 2019 •

edited

Loading

vamsi920 commented Jan 3, 2020

markalexander commented Jan 5, 2020 •

edited

Loading

aprilmintacpineda commented Jan 7, 2020

Mahmo0odsalah commented Jan 9, 2020

This comment has been minimized.

LucasNeevs commented Mar 14, 2020

bluesealjs commented Jun 6, 2020 •

edited

Loading

NguyenKyThinh94 commented Jun 20, 2020

Georgeevergreen0 commented Jul 8, 2020

brianqian commented Jul 9, 2020

wojtekmaj commented Apr 1, 2021

App crash after import from react-pdf #496

App crash after import from react-pdf #496

Comments

ditiz commented Dec 11, 2019 • edited by wojtekmaj Loading

brentmitch commented Dec 16, 2019

brentmitch commented Dec 16, 2019 • edited Loading

brentmitch commented Dec 17, 2019

robsco-git commented Dec 18, 2019

Raysharr commented Dec 27, 2019 • edited Loading

th-m commented Dec 28, 2019 • edited Loading

Raysharr commented Dec 28, 2019 • edited Loading

vamsi920 commented Jan 3, 2020

markalexander commented Jan 5, 2020 • edited Loading

aprilmintacpineda commented Jan 7, 2020

Mahmo0odsalah commented Jan 9, 2020

This comment has been minimized.

LucasNeevs commented Mar 14, 2020

bluesealjs commented Jun 6, 2020 • edited Loading

NguyenKyThinh94 commented Jun 20, 2020

Georgeevergreen0 commented Jul 8, 2020

brianqian commented Jul 9, 2020

wojtekmaj commented Apr 1, 2021

ditiz commented Dec 11, 2019 •

edited by wojtekmaj

Loading

brentmitch commented Dec 16, 2019 •

edited

Loading

Raysharr commented Dec 27, 2019 •

edited

Loading

th-m commented Dec 28, 2019 •

edited

Loading

Raysharr commented Dec 28, 2019 •

edited

Loading

markalexander commented Jan 5, 2020 •

edited

Loading

bluesealjs commented Jun 6, 2020 •

edited

Loading