React-pdf: Javascript Heap out of memory while running yarn build

[wlee367]

Describe the bug
I have a Gitlab CI / CD that uses Docker to create builds from my develop branch. When the build process runs cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --max-old-space-size=8192 --color -p --progress --hide-modules --display-optimization-bailout it will eventually run out of memory and crash fail the build process.

This is the stack trace I get at the very end:

<--- Last few GCs --->

[8014:0x5628caabbb00]   196767 ms: Mark-sweep 1342.3 (1424.2) -> 1342.2 (1424.2) MB, 2205.4 / 0.0 ms  (average mu = 0.114, current mu = 0.000) allocation failure scavenge might not succeed
[8014:0x5628caabbb00]   198652 ms: Mark-sweep 1343.2 (1424.2) -> 1343.2 (1424.7) MB, 1881.4 / 0.0 ms  (average mu = 0.062, current mu = 0.002) allocation failure scavenge might not succeed


<--- JS stacktrace --->

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

   0: ExitFrame [pc: 0x204ce28cfb5d]
   1: StubFrame [pc: 0x204ce28d0eca]
Security context: 0x1a8e6f21d921 <JSObject>
   2: /* anonymous */(aka /* anonymous */) [0x87a8c881f9] [/app/node_modules/terser/dist/bundle.min.js:~1] [pc=0x204ce3b3ed0d](this=0x0629fd5825b1 <undefined>,0x0629fd588b91 <String[1]: ">)
   3: /* anonymous */(aka /* anonymous */) [0x87a8c88279] [/app/node_modules/terser/dist/bundle.min.js:~1] [pc=0x204ce3cd3baf](thi...

[91mFATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
[0m[91mAborted (core dumped)
[0m[91merror Command failed with exit code 134.
[0minfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Removing intermediate container 091a05b33175
Service 'webapp' failed to build: The command '/bin/sh -c ship-update &&     yarn &&     yarn run build &&     ship-init /app' returned a non-zero code: 1
make: *** [Makefile:67: docker-build] Error 1
section_end:1563217006:build_script
[0Ksection_start:1563217006:after_script
[0Ksection_end:1563217007:after_script
[0Ksection_start:1563217007:upload_artifacts_on_failure
[0Ksection_end:1563217008:upload_artifacts_on_failure
[0K[31;1mERROR: Job failed: exit code 1
[0;m

Expected behavior
I expect the build command to finish successfully without running out of memory.

Desktop (please complete the following information):

• React PDF version: ^1.6.3
• React version 16.8.6
• React Boilerplate v 3.7.0
  Not sure if Webpack is relevant here but here are my webpack specs:
• Webpack v4.23.1,
• Webpack-cli: v2.1.2,
• webpack-dev-middleware": 3.4.0,
• webpack-hot-middleware": 2.24.3,
• webpack-pwa-manifest": 3.7.1,

This is happening inside my docker container, so here are some specs about my docker container:

bash-4.4$ npm -v
6.5.0-next.0
bash-4.4$ yarn -v
1.12.3
bash-4.4$ node -v
v11.6.0
bash-4.4$ uname -a
Linux bf08bfbb7b37 4.15.0-54-generic #58-Ubuntu SMP Mon Jun 24 10:55:24 UTC 2019 x86_64 Linux
bash-4.4$

[wlee367]

Closing this issue as I just found a workaround as per this comment

But one other thing that I did to get this to pass the build step is to just increase the memory limit via the npm scripts. I added an NODE_OPTIONS=--max_old_space_size=8192 flag. This let it pass the build step and proceed like normal.

However we decided to not use this approach because every time we imported in something from react-pdf, the bundle size grew by 2mb. Decided to go with a similar approach mentioned in the linked comment above.

[Lewiscowles1986]

Helped with Heroku deployment of a TypeScript + NodeJS app that struggled to build 🙌 2020-09-30