"Allocation failed - JavaScript heap out of memory" error for React 16.12
See original GitHub issueAttach (recommended) or Link to PDF file here: https://arxiv.org/pdf/quant-ph/0410100.pdf
Configuration:
- Web browser and its version: Google Chrome 79
- Operating system and its version: Ubuntu 18.04
- PDF.js version: 2.2.228
- Is a browser extension: No
Steps to reproduce the problem:
- Create a react app with ‘create-react-app’ script
- Integrate pdfjs-dist
- Run
npm start
What is the expected behavior? (add screenshot) It should compile and load the pdf.
What went wrong? (add screenshot)
Failed to compile, log is as below
{
"header": {
"reportVersion": 1,
"event": "Allocation failed - JavaScript heap out of memory",
"trigger": "FatalError",
"filename": "report.20200103.140825.17104.0.001.json",
"dumpEventTime": "2020-01-03T14:08:25Z",
"dumpEventTimeStamp": "1578040705952",
"processId": 17104,
"cwd": "/home/users011/Projects/test-pdf",
"commandLine": [
"node",
"/home/users011/Projects/test-pdf/node_modules/react-scripts/scripts/start.js"
],
"nodejsVersion": "v12.14.0",
"glibcVersionRuntime": "2.27",
"glibcVersionCompiler": "2.17",
"wordSize": 64,
"arch": "x64",
"platform": "linux",
"componentVersions": {
"node": "12.14.0",
"v8": "7.7.299.13-node.16",
"uv": "1.33.1",
"zlib": "1.2.11",
"brotli": "1.0.7",
"ares": "1.15.0",
"modules": "72",
"nghttp2": "1.39.2",
"napi": "5",
"llhttp": "1.1.4",
"http_parser": "2.8.0",
"openssl": "1.1.1d",
"cldr": "35.1",
"icu": "64.2",
"tz": "2019c",
"unicode": "12.1"
},
"release": {
"name": "node",
"lts": "Erbium",
"headersUrl": "https://nodejs.org/download/release/v12.14.0/node-v12.14.0-headers.tar.gz",
"sourceUrl": "https://nodejs.org/download/release/v12.14.0/node-v12.14.0.tar.gz"
},
"osName": "Linux",
"osRelease": "4.15.0-72-generic",
"osVersion": "#81-Ubuntu SMP Tue Nov 26 12:20:02 UTC 2019",
"osMachine": "x86_64",
"cpus": [
{
"model": "Intel(R) Core(TM) i7-7600U CPU @ 2.80GHz",
"speed": 3262,
"user": 14729000,
"nice": 24200,
"sys": 2873700,
"idle": 103371100,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i7-7600U CPU @ 2.80GHz",
"speed": 3263,
"user": 14802200,
"nice": 16900,
"sys": 2931200,
"idle": 102253600,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i7-7600U CPU @ 2.80GHz",
"speed": 3230,
"user": 14804900,
"nice": 15300,
"sys": 2833100,
"idle": 103353500,
"irq": 0
},
{
"model": "Intel(R) Core(TM) i7-7600U CPU @ 2.80GHz",
"speed": 3264,
"user": 14757800,
"nice": 13100,
"sys": 2789400,
"idle": 103643700,
"irq": 0
}
],
"networkInterfaces": [
{
"name": "lo",
"internal": true,
"mac": "00:00:00:00:00:00",
"address": "127.0.0.1",
"netmask": "255.0.0.0",
"family": "IPv4"
},
{
"name": "wlp2s0",
"internal": false,
"mac": "00:28:f8:aa:e9:02",
"address": "192.168.0.144",
"netmask": "255.255.252.0",
"family": "IPv4"
},
{
"name": "lo",
"internal": true,
"mac": "00:00:00:00:00:00",
"address": "::1",
"netmask": "ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff",
"family": "IPv6",
"scopeid": 0
},
{
"name": "wlp2s0",
"internal": false,
"mac": "00:28:f8:aa:e9:02",
"address": "fe80::40f4:402c:6da1:c117",
"netmask": "ffff:ffff:ffff:ffff::",
"family": "IPv6",
"scopeid": 3
}
],
"host": "inflaps011"
},
"javascriptStack": {
"message": "No stack.",
"stack": [
"Unavailable."
]
},
"nativeStack": [
{
"pc": "0x0000000000b04935",
"symbol": "report::TriggerNodeReport(v8::Isolate*, node::Environment*, char const*, char const*, std::string const&, v8::Local<v8::String>) [node]"
},
{
"pc": "0x00000000009db9e3",
"symbol": "node::OnFatalError(char const*, char const*) [node]"
},
{
"pc": "0x0000000000b39f1e",
"symbol": "v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]"
},
{
"pc": "0x0000000000b3a299",
"symbol": "v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]"
},
{
"pc": "0x0000000000ce5635",
"symbol": " [node]"
},
{
"pc": "0x0000000000ce5cc6",
"symbol": "v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node]"
},
{
"pc": "0x0000000000cf1b5a",
"symbol": "v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]"
},
{
"pc": "0x0000000000cf2a65",
"symbol": "v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]"
},
{
"pc": "0x0000000000cf5478",
"symbol": "v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [node]"
},
{
"pc": "0x0000000000cbbda7",
"symbol": "v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType) [node]"
},
{
"pc": "0x0000000000ff1e0b",
"symbol": "v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]"
},
{
"pc": "0x0000000001374fd9",
"symbol": " [node]"
}
],
"javascriptHeap": {
"totalMemory": 2153709568,
"totalCommittedMemory": 2149947792,
"usedMemory": 2139911152,
"availableMemory": 48333568,
"memoryLimit": 2197815296,
"heapSpaces": {
"read_only_space": {
"memorySize": 262144,
"committedMemory": 32568,
"capacity": 261872,
"used": 32296,
"available": 229576
},
"new_space": {
"memorySize": 4194304,
"committedMemory": 1243368,
"capacity": 2094976,
"used": 191688,
"available": 1903288
},
"old_space": {
"memorySize": 2107224064,
"committedMemory": 2106924608,
"capacity": 2098820832,
"used": 2098820832,
"available": 0
},
"code_space": {
"memorySize": 1474560,
"committedMemory": 1220320,
"capacity": 1148480,
"used": 1148480,
"available": 0
},
"map_space": {
"memorySize": 3149824,
"committedMemory": 3122256,
"capacity": 2516480,
"used": 2516480,
"available": 0
},
"large_object_space": {
"memorySize": 36782080,
"committedMemory": 36782080,
"capacity": 36650720,
"used": 36650720,
"available": 0
},
"code_large_object_space": {
"memorySize": 622592,
"committedMemory": 622592,
"capacity": 550656,
"used": 550656,
"available": 0
},
"new_large_object_space": {
"memorySize": 0,
"committedMemory": 0,
"capacity": 2094976,
"used": 0,
"available": 2094976
}
}
},
"resourceUsage": {
"userCpuSeconds": 146.254,
"kernelCpuSeconds": 3.4576,
"cpuConsumptionPercent": 194.431,
"maxRss": 2256400384,
"pageFaults": {
"IORequired": 0,
"IONotRequired": 1091007
},
"fsActivity": {
"reads": 0,
"writes": 0
}
},
"uvthreadResourceUsage": {
"userCpuSeconds": 60.8779,
"kernelCpuSeconds": 1.90169,
"cpuConsumptionPercent": 81.532,
"fsActivity": {
"reads": 0,
"writes": 0
}
},
"libuv": [
],
"environmentVariables": {
"GJS_DEBUG_TOPICS": "JS ERROR;JS LOG",
"LESSOPEN": "| /usr/bin/lesspipe %s",
"npm_config_cache_lock_stale": "60000",
"npm_config_ham_it_up": "",
"npm_config_legacy_bundling": "",
"npm_config_sign_git_tag": "",
"USER": "users011",
"LANGUAGE": "en_GB:en",
"LC_TIME": "en_US.UTF-8",
"npm_config_user_agent": "npm/6.13.4 node/v12.14.0 linux x64",
"npm_config_always_auth": "",
"TEXTDOMAIN": "im-config",
"XDG_SEAT": "seat0",
"npm_config_bin_links": "true",
"npm_config_key": "",
"SSH_AGENT_PID": "1510",
"XDG_SESSION_TYPE": "x11",
"npm_config_allow_same_version": "",
"npm_config_description": "true",
"npm_config_fetch_retries": "2",
"npm_config_heading": "npm",
"npm_config_if_present": "",
"npm_config_init_version": "1.0.0",
"npm_config_user": "",
"npm_node_execpath": "/usr/bin/node",
"SHLVL": "3",
"XDG_CACHE_HOME": "/home/users011/snap/code/common/.cache",
"npm_config_prefer_online": "",
"npm_config_noproxy": "",
"CHROME_DESKTOP": "code-url-handler.desktop",
"QT4_IM_MODULE": "xim",
"HOME": "/home/users011",
"npm_package_browserslist_production_0": ">0.2%",
"npm_config_force": "",
"DESKTOP_SESSION": "ubuntu",
"TERM_PROGRAM_VERSION": "1.41.1",
"npm_package_browserslist_production_1": "not dead",
"npm_config_only": "",
"npm_config_read_only": "",
"GIO_LAUNCHED_DESKTOP_FILE": "/var/lib/snapd/desktop/applications/code_code.desktop",
"npm_package_browserslist_production_2": "not op_mini all",
"npm_config_cache_min": "10",
"npm_config_init_license": "ISC",
"GNOME_SHELL_SESSION_MODE": "ubuntu",
"APPLICATION_INSIGHTS_NO_DIAGNOSTIC_CHANNEL": "true",
"GTK_MODULES": "gail:atk-bridge",
"npm_config_editor": "vi",
"npm_config_rollback": "true",
"npm_config_tag_version_prefix": "v",
"LC_MONETARY": "en_US.UTF-8",
"npm_config_cache_max": "Infinity",
"npm_config_timing": "",
"npm_config_userconfig": "/home/users011/.npmrc",
"DBUS_SESSION_BUS_ADDRESS": "unix:path=/run/user/1001/bus",
"npm_config_engine_strict": "",
"npm_config_init_author_name": "",
"npm_config_init_author_url": "",
"npm_config_preid": "",
"npm_config_tmp": "/tmp",
"COLORTERM": "truecolor",
"GIO_LAUNCHED_DESKTOP_FILE_PID": "16766",
"npm_package_dependencies_react_scripts": "3.3.0",
"npm_package_description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"npm_config_depth": "Infinity",
"npm_config_package_lock_only": "",
"npm_config_save_dev": "",
"npm_config_usage": "",
"npm_package_dependencies__testing_library_react": "^9.4.0",
"npm_package_readmeFilename": "README.md",
"npm_config_metrics_registry": "https://registry.npmjs.org/",
"npm_config_cafile": "",
"npm_config_otp": "",
"npm_config_package_lock": "true",
"npm_config_progress": "true",
"npm_config_https_proxy": "",
"npm_config_save_prod": "",
"IM_CONFIG_PHASE": "2",
"npm_config_audit": "true",
"npm_config_cidr": "",
"npm_config_onload_script": "",
"npm_config_sso_type": "oauth",
"LOGNAME": "users011",
"GTK_IM_MODULE": "ibus",
"npm_config_rebuild_bundle": "true",
"npm_config_save_bundle": "",
"npm_config_shell": "/bin/bash",
"_": "/usr/bin/npm",
"npm_package_private": "true",
"npm_config_dry_run": "",
"npm_config_format_package_lock": "true",
"npm_config_prefix": "/usr",
"npm_config_scope": "",
"npm_config_browser": "",
"npm_config_cache_lock_wait": "10000",
"npm_config_ignore_prepublish": "",
"npm_config_registry": "https://registry.npmjs.org/",
"npm_config_save_optional": "",
"npm_config_searchopts": "",
"npm_config_versions": "",
"USERNAME": "users011",
"XDG_SESSION_ID": "1",
"TERM": "xterm-256color",
"npm_config_cache": "/home/users011/.npm",
"npm_config_proxy": "",
"npm_config_send_metrics": "",
"GNOME_DESKTOP_SESSION_ID": "this-is-deprecated",
"npm_package_scripts_start": "react-scripts start",
"npm_config_global_style": "",
"npm_config_ignore_scripts": "",
"npm_config_version": "",
"WINDOWPATH": "1",
"npm_package_browserslist_development_0": "last 1 chrome version",
"npm_config_local_address": "",
"npm_config_viewer": "man",
"npm_config_node_gyp": "/usr/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js",
"PATH": "/usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/users011/Projects/test-pdf/node_modules/.bin:/home/users011/.local/bin:/home/users011/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/users011/golib:/home/users011/Projects/gospace:/usr/local/go/bin",
"PAPERSIZE": "letter",
"SESSION_MANAGER": "local/inflaps011:@/tmp/.ICE-unix/1366,unix/inflaps011:/tmp/.ICE-unix/1366",
"npm_package_name": "test-pdf",
"npm_package_browserslist_development_1": "last 1 firefox version",
"npm_config_audit_level": "low",
"npm_config_prefer_offline": "",
"NODE": "/usr/bin/node",
"XDG_MENU_PREFIX": "gnome-",
"LC_ADDRESS": "en_US.UTF-8",
"BAMF_DESKTOP_FILE_HINT": "/var/lib/snapd/desktop/applications/code_code.desktop",
"XDG_RUNTIME_DIR": "/run/user/1001/snap.code",
"npm_package_browserslist_development_2": "last 1 safari version",
"npm_config_color": "true",
"npm_config_sign_git_commit": "",
"DISPLAY": ":0",
"npm_package_scripts_eject": "react-scripts eject",
"npm_config_fetch_retry_mintimeout": "10000",
"npm_config_maxsockets": "50",
"npm_config_offline": "",
"npm_config_sso_poll_frequency": "500",
"LANG": "en_GB.UTF-8",
"XDG_CURRENT_DESKTOP": "Unity",
"LC_TELEPHONE": "en_US.UTF-8",
"npm_package_dependencies_react_dom": "^16.12.0",
"npm_config_umask": "0002",
"TERM_PROGRAM": "vscode",
"XDG_SESSION_DESKTOP": "ubuntu",
"XMODIFIERS": "@im=ibus",
"XAUTHORITY": "/run/user/1001/gdm/Xauthority",
"npm_package_gitHead": "1e91aa67031924f51383ab8cc1c355ec93bef5a2",
"npm_config_fund": "true",
"npm_config_fetch_retry_maxtimeout": "60000",
"npm_config_loglevel": "notice",
"npm_config_logs_max": "10",
"npm_config_message": "%s",
"npm_lifecycle_script": "react-scripts start",
"SSH_AUTH_SOCK": "/run/user/1001/keyring/ssh",
"GSETTINGS_SCHEMA_DIR": "/snap/code/23/usr/share/glib-2.0/schemas",
"npm_package_scripts_test": "react-scripts test",
"npm_config_ca": "",
"npm_config_cert": "",
"npm_config_global": "",
"npm_config_link": "",
"DISABLE_WAYLAND": "1",
"LC_NAME": "en_US.UTF-8",
"GOPATH": "/home/users011/golib:/home/users011/Projects/gospace",
"SHELL": "/bin/bash",
"GDK_PIXBUF_MODULEDIR": "/snap/code/23/usr/lib/x86_64-linux-gnu/gdk-pixbuf-2.0/2.10.0/loaders",
"npm_package_version": "0.1.0",
"npm_package_dependencies__testing_library_jest_dom": "^4.2.4",
"npm_config_access": "",
"npm_config_also": "",
"npm_config_save": "true",
"npm_config_unicode": "true",
"npm_lifecycle_event": "start",
"NO_AT_BRIDGE": "1",
"QT_ACCESSIBILITY": "1",
"GDMSESSION": "ubuntu",
"npm_package_dependencies__testing_library_user_event": "^7.2.1",
"npm_package_scripts_build": "react-scripts build",
"npm_config_argv": "{\"remain\":[],\"cooked\":[\"run\",\"start\"],\"original\":[\"run\",\"start\"]}",
"npm_config_before": "",
"npm_config_long": "",
"npm_config_production": "",
"npm_config_searchlimit": "20",
"npm_config_unsafe_perm": "true",
"npm_config_update_notifier": "true",
"LESSCLOSE": "/usr/bin/lesspipe %s %s",
"npm_config_auth_type": "legacy",
"npm_config_node_version": "12.14.0",
"npm_config_tag": "latest",
"LC_MEASUREMENT": "en_US.UTF-8",
"npm_config_git_tag_version": "true",
"npm_config_commit_hooks": "true",
"npm_config_script_shell": "",
"npm_config_shrinkwrap": "true",
"TEXTDOMAINDIR": "/usr/share/locale/",
"GJS_DEBUG_OUTPUT": "stderr",
"GDK_PIXBUF_MODULE_FILE": "/home/users011/snap/code/common/.cache/gdk-pixbuf-loaders.cache",
"GPG_AGENT_INFO": "/run/user/1001/gnupg/S.gpg-agent:0:1",
"LC_IDENTIFICATION": "en_US.UTF-8",
"npm_package_dependencies_pdfjs_dist": "^2.2.228",
"npm_config_fetch_retry_factor": "10",
"npm_config_save_exact": "",
"npm_config_strict_ssl": "true",
"XDG_VTNR": "1",
"QT_IM_MODULE": "xim",
"npm_config_dev": "",
"npm_config_globalconfig": "/usr/etc/npmrc",
"npm_config_init_module": "/home/users011/.npm-init.js",
"npm_config_parseable": "",
"PWD": "/home/users011/Projects/test-pdf",
"npm_config_globalignorefile": "/usr/etc/npmignore",
"npm_execpath": "/usr/lib/node_modules/npm/bin/npm-cli.js",
"CLUTTER_IM_MODULE": "xim",
"XDG_DATA_DIRS": "/usr/share/ubuntu:/usr/local/share/:/usr/share/:/var/lib/snapd/desktop",
"XDG_CONFIG_DIRS": "/etc/xdg/xdg-ubuntu:/etc/xdg",
"npm_config_cache_lock_retries": "10",
"npm_config_searchstaleness": "900",
"LC_NUMERIC": "en_US.UTF-8",
"npm_config_node_options": "",
"npm_config_save_prefix": "^",
"npm_config_scripts_prepend_node_path": "warn-only",
"LC_PAPER": "en_US.UTF-8",
"npm_config_group": "1001",
"npm_config_init_author_email": "",
"npm_config_searchexclude": "",
"npm_config_git": "git",
"npm_config_optional": "true",
"npm_package_dependencies_react": "^16.12.0",
"npm_package_eslintConfig_extends": "react-app",
"npm_config_json": "",
"INIT_CWD": "/home/users011/Projects/test-pdf",
"BABEL_ENV": "development",
"NODE_ENV": "development",
"NODE_PATH": "",
"WEBPACK_DEV_SERVER": "true"
},
"userLimits": {
"core_file_size_blocks": {
"soft": 0,
"hard": "unlimited"
},
"data_seg_size_kbytes": {
"soft": "unlimited",
"hard": "unlimited"
},
"file_size_blocks": {
"soft": "unlimited",
"hard": "unlimited"
},
"max_locked_memory_bytes": {
"soft": 16777216,
"hard": 16777216
},
"max_memory_size_kbytes": {
"soft": "unlimited",
"hard": "unlimited"
},
"open_files": {
"soft": 1048576,
"hard": 1048576
},
"stack_size_bytes": {
"soft": 8388608,
"hard": "unlimited"
},
"cpu_time_seconds": {
"soft": "unlimited",
"hard": "unlimited"
},
"max_user_processes": {
"soft": 63146,
"hard": 63146
},
"virtual_memory_kbytes": {
"soft": "unlimited",
"hard": "unlimited"
}
},
"sharedObjects": [
"linux-vdso.so.1",
"/lib/x86_64-linux-gnu/libdl.so.2",
"/usr/lib/x86_64-linux-gnu/libstdc++.so.6",
"/lib/x86_64-linux-gnu/libm.so.6",
"/lib/x86_64-linux-gnu/libgcc_s.so.1",
"/lib/x86_64-linux-gnu/libpthread.so.0",
"/lib/x86_64-linux-gnu/libc.so.6",
"/lib64/ld-linux-x86-64.so.2",
"/lib/x86_64-linux-gnu/libnss_files.so.2"
]
}
Here is the code below
import React, { useRef, useEffect } from "react";
import PropTypes from "prop-types";
import pdfjs from "pdfjs-dist";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
const PdfComponent = ({ src }) => {
const canvasRef = useRef(null);
useEffect(() => {
const fetchPdf = async () => {
const loadingTask = pdfjs.getDocument(src);
const pdf = await loadingTask.promise;
const firstPageNumber = 1;
const page = await pdf.getPage(firstPageNumber);
const scale = 1.5;
const viewport = page.getViewport({ scale: scale });
// Prepare canvas using PDF page dimensions
const canvas = canvasRef.current;
const context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
const renderContext = {
canvasContext: context,
viewport: viewport
};
const renderTask = page.render(renderContext);
await renderTask.promise;
};
fetchPdf();
}, [src]);
return (
<canvas
ref={canvasRef}
width={window.innerWidth}
height={window.innerHeight}
/>
);
};
PdfComponent.propTypes = {
src: PropTypes.string
};
PdfComponent.defaultProps = {
src: "https://arxiv.org/pdf/quant-ph/0410100.pdf"
};
export default PdfComponent;
Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension): NA
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:10
Top Results From Across the Web
How to resolve the memory heap out issue in React App
The memory heap out issue occurs when the heap size is not sufficient to run the application. To resolve this issue, open the...
Read more >Node.js frequent JavaScript heap out of memory crash on ...
Since a couple of weeks ago, my WebStorm IDE crashes (JavaScript heap out of memory) on every update that I make to the...
Read more >JavaScript heap out of memory when running a react app
You will see error like this. FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed — JavaScript heap out of memory when running...
Read more >How to solve JavaScript heap out of memory error
Both errors above occur when JavaScript has a lot of processes to handle, and the default allocated memory by Node is not enough...
Read more >Node.js – Heroku server crashes with “JavaScript heap out of ...
I have narrowed down the issue to the initial import { Admin } from 'react-admin'; by setting up a clean project with just...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@hungdev You can put it in your scripts in
package.json
as well.Please see https://github.com/mozilla/pdf.js/blob/master/.github/CONTRIBUTING.md (emphasis mine):