Dockerizing React in production mode: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Question

I am trying to dockerize a React app. Although I can do it for development mode, I could not do for production mode.

I can also build it in local but I got this error when I tried it Docker:

Step 10/14 : RUN npm run build
 ---> Running in 2c95d18e526c

> [email protected] build /x
> react-scripts build

Creating an optimized production build...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x8fb090 node::Abort() [node]
 2: 0x8fb0dc  [node]
 3: 0xb0322e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]

<--- Last few GCs --->

[25:0x4394f50]   192197 ms: Mark-sweep 1375.9 (1444.4) -> 1366.4 (1444.4) MB, 993.9 / 0.0 ms  (average mu = 0.209, current mu = 0.125) allocation failure scavenge might not succeed
[25:0x4394f50]   193285 ms: Mark-sweep 1378.5 (1444.4) -> 1368.9 (1447.9) MB, 959.5 / 0.0 ms  (average mu = 0.166, current mu = 0.118) allocation failure scavenge might not succeed


<--- JS stacktrace --->

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

    0: ExitFrame [pc: 0x277faa75be1d]
    1: StubFrame [pc: 0x277faa7047bb]
    2: ConstructFrame [pc: 0x277faa70d145]
Security context: 0x3fdee7f9e6c1 <JSObject>
    3: DoJoin(aka DoJoin) [0x3fdee7f85e69] [native array.js:~87] [pc=0x277faab5432d](this=0x25a0974826f1 <undefined>,l=0x0b1a02686109 <JSArray[5]>,m=5,A=0x25a0974828c9 <true>,w=0x0817ee2325c9 <String[1]: />,v=0x25a0974829a1 <false>)
    4: Join(aka Join) [0x3fdee7f85eb9] [native...

 4: 0xb03464 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xef74c2  [node]
 6: 0xef75c8 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [node]
 7: 0xf036a2 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
 8: 0xf03fd4 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 9: 0xf06c41 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [node]
10: 0xed00c4 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [node]
11: 0x117024e v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [node]
12: 0x277faa75be1d
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-07-01T08_22_44_303Z-debug.log
The command '/bin/sh -c npm run build' returned a non-zero code: 1

My Dockerfile is like this:

FROM node:10 as build
 
COPY ./x /x
COPY ./y /y

WORKDIR /y
RUN npm install
RUN npm run build

WORKDIR ../
WORKDIR /x

RUN npm install 


#ENV NODE_OPTIONS=--max-old-space-size=8192

RUN npm run build

# production environment
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

X is dependent to Y as I demonstrate package.json of X:

"dependencies": {
    "someName": "file:../y",
}

I tried many ways to tackle this issue:

• Upgrade or downgrade of node in Dockerfile
• Increasing heap size for application (I am not sure I could do it correctly)

Thank you in advance for your answers!

Answer 1

I could handle the issue on a Linux machine.

On Windows 10 machine, in the container, I run the following command:

export NODE_OPTIONS="--max-old-space-size=20000"

Then, I encountered the following error:

The build failed because the process exited too early. This probably means the system ran out of memory or someone called kill -9 on the process.

I have learned that the issue is swap space:

https://create-react-app.dev/docs/troubleshooting/#:~:text=The%20build%20failed%20because%20the,or%20build%20the%20project%20locally.

I could not increase the swap space of the container on Windows 10 machine but while the space size was 1 GB, it is 2 GB in the container on Linux machine.

Note that I encountered the error I have mentioned above in the first run of npm run build. After this attempt, I tried second run and it built successfully. I could do second run in Dockerfile with following commands:

...
RUN npm run build; exit 0
RUN npm run build
...

It is like a try-catch structure.

Answer 2

The NODE_OPTIONS solution did not work for me, I am using Node v14 and React Scripts v4.

This solution from GitHub finally helped - https://github.com/wojtekmaj/react-pdf/issues/496#issuecomment-566200248

GENERATE_SOURCEMAP=false

Added to my Dockerfile right before the build command.

Answer 3

Node limits it's heap to 512M by default. Passing the environment variable in the RUN command worked for us.

RUN NODE_OPTIONS="--max-old-space-size=8192" yarn build