Before you start - checklist
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
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
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?
There is an issue for Create React App. See: https://github.com/facebook/create-react-app/issues/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.
Please see https://github.com/wojtekmaj/react-pdf/issues/498#issuecomment-566948710 - a response to the same issue.
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 :).
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.
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 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
@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.
Ran into this as well. https://github.com/wojtekmaj/react-pdf/issues/496#issuecomment-566200248 suggestion worked but that obviously makes debugging a bit more difficult because sourcemaps help in debugging in the browser...
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.
Hell ya all....
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!
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
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 :(
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
Another solution that I'm going with is downgrading to react-scripts 3.2
Most helpful comment
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