Fixing Memory Heap ReactJS on Heroku

5 min readMay 23, 2020

Hi everyone! With me again, to share some experience, though or opinion about technology related with software engineering field. Today, I will share about my experience solving some issues when deploying Frontend application using ReactJS into Heroku.

So, what the issues? First, let’s try to build simple application using ReactJS and try to deploying into Heroku.

1. Setup ReactJS Project

Make sure we already have this installed on our system:

Node ≥ 8.10
NPM ≥ 5.6

Visit this page https://reactjs.org/docs/create-a-new-react-app.html for the detail. Then create a project with this command.

npx create-react-app medium-heroku-reactjs-app
cd medium-heroku-reactjs-app
npm start

If you don’t have npx, try with this command.

npm install -g create-react-app
create-react-app medium-heroku-reactjs-app
cd medium-heroku-reactjs-app
npm start

After starting, our browser should be opened http://localhost:3000/ and show this page.

Picture 1 Successfully Running ReactJS App

2. Setup Heroku Project

Next, make sure we already have a valid account on Heroku and open this page https://dashboard.heroku.com/

Create a new app by clicking New button, and choose Create new app.

Setup our app name, in this example we use medium-heroku-reactjs-app for the app name. Then, click Create app for finish the configuration.

Nice, our Heroku app already created. Try to access the app on this url https://medium-heroku-reactjs-app.herokuapp.com/. We will have response like this.

On the next part we will try to deploy our application on local machine to Heroku.

3. Deploy Project

We will use Heroku CLI for deploying our app. The detail about this CLI can be found in this page https://devcenter.heroku.com/articles/heroku-cli

Back to our app on Heroku page, go to Deploy tab, and we will have guide for deploying into Heroku.

Picture 5 Heroku App Deployment Guide (1)

Picture 6 Heroku App Deployment Guide (2)

But, before we deploying our app, we should make a small changes into our package.json

What we should do is adding engines information for our app. My engines when writing this story were look like this.

"engines": {
  "node": "14.2.0",
  "npm": "6.14.5"
}

If we haven’t already, log in to our Heroku account and follow the prompts to create a new SSH public key.

heroku login

Initialize a git repository in a new or existing directory

cd medium-heroku-reactjs-app
git init
heroku git:remote -a medium-heroku-reactjs-app

Commit your code to the repository and deploy it to Heroku using Git.

git add .
git commit -m "init project"
git push heroku master

After finishing push and build, re-check the url. We will getting Application error like this.

I’m a little bit confused about this issue, because a lot of articles have no problem with this step. Finally, I found the issue when checking detail by detail.

The issue come from react-dom and react-scripts version on package.json

"react-dom": "^16.13.1",
"react-scripts": "3.4.1"

The solution is downgrade both of the version with this version.

"react-dom": "^16.13.0",
"react-scripts": "3.4.0"

Commit the changes and push again into Heroku. If there’s any issue with yarn.lock file, don’t forget to run yarn install command.

Refresh our app url, then we should getting response page like this.

4. Modify Project

My next issue is when I created simple application, one of my feature is render pdf file. But my app on Heroku was crash due to memory heap. Let’s try to replicate the issue with this simple pdf page.

Add pdf viewer using yarn command.

yarn add pdf-viewer-reactjs

Then modify App.js under src directory using this code.

Commit the changes and push again into Heroku. Refresh our app url, then we should getting error response page like this.

Check the error using heroku logs command

heroku logs

We will find error that indicate about memory heap

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

After looking the solution for the issue, I found we need to adding Config Vars into Heroku. Go to our project app and choose Settings tabs. And we need to adding NODE_OPTIONS variable with --max_old_space_size=1024 value. Save and restart the dynos.

After successfully restart the application, try to refresh the browser. We should not getting Application error again.

Yeah, we made it. If you need to change the value depend on your application size, maybe you should change to higher number. In my experience, I need to setup the value until 4096 .

If you want to see the example project for this story, you can visit this github repository:

moemoe89/reactjs-heap

This project was bootstrapped with Create React App. In the project directory, you can run: Runs the app in the…

github.com

Hope you enjoy it, I’m happy if this article useful for you! Happy Deploying!

Thank you!