Build Failure with Heap Memory Error and NPM Issues on Heroku

[LaodiHS]

Issue Summary

I encountered an issue while trying to build with Heroku. Initially, I received a heap memory error. In an attempt to address this, I increased the allocated memory. However, this led to NPM errors during the build process.

Configuration Files
heroku.yml

build:
  docker:
    web: Dockerfile
  config:
    SHOPIFY_API_KEY: "*************************"
    SHOPIFY_API_SECRET: "*******************"
    HOST: "https://myapp-76114b90699c.herokuapp.com/"
    APP_ENV: "production"
    NODE_ENV: "production"
    SCOPES: "write_products,read_content,write_content"

Dockerfile

FROM node:18-alpine

ARG SHOPIFY_API_KEY
ENV SHOPIFY_API_KEY=$SHOPIFY_API_KEY
EXPOSE 8081
WORKDIR /app
COPY web .
RUN npm install
RUN cd frontend && npm install && npm run build
CMD ["npm", "run", "serve"]

Logs

vite build
vite v4.5.0 building for production...
transforming...
✓ 3562 modules transformed.
rendering chunks...
<--- Last few GCs --->
[68:0x7f3de56e9020]    74636 ms: Mark-sweep (reduce) 2024.8 (2082.1) -> 2022.1 (2080.2) MB, 4513.8 / 0.0 ms  (average mu = 0.248, current mu = 0.208) allocation failure; GC in old space requested
[68:0x7f3de56e9020]    80342 ms: Mark-sweep (reduce) 2024.1 (2081.7) -> 2023.7 (2082.0) MB, 4608.2 / 0.0 ms  (average mu = 0.220, current mu = 0.192) allocation failure; GC in old space requested
<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
npm ERR! path /app/frontend
npm ERR! command failed
npm ERR! signal SIGABRT
npm ERR! command sh -c vite build
npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2023-11-01T22_56_07_803Z-debug-0.log
The command '/bin/sh -c cd frontend && npm install && npm run build' returned a non-zero code: 1

Steps Taken

After encountering the heap memory error, I made the following changes in package.json:

"scripts": {
  "build": "NODE_OPTIONS=--max_old_space_size=4096 vite build",
  "dev": "vite",
  "coverage": "vitest run --coverage"
}

Logs

git push heroku main
Enumerating objects: 387, done.
Counting objects: 100% (387/387), done.
Delta compression using up to 8 threads
Compressing objects: 100% (319/319), done.
Writing objects: 100% (321/321), 127.37 KiB | 2.23 MiB/s, done.
Total 321 (delta 269), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (269/269), completed with 59 local objects.
remote: Updated 184 paths from 273d6ce
remote: Compressing source files... done.
remote: Building source:
remote: Waiting on build...
remote: === Fetching app code
remote: 
remote: === Building web (Dockerfile)
remote: Sending build context to Docker daemon  2.393MB
remote: Step 1/9 : FROM node:18-alpine
remote: 18-alpine: Pulling from library/node
remote: 96526aa774ef: Pulling fs layer
remote: 3130715204cf: Pulling fs layer
remote: b06de8ab1c4f: Pulling fs layer
remote: 90ef3ffc5156: Pulling fs layer
remote: b06de8ab1c4f: Verifying Checksum
remote: b06de8ab1c4f: Download complete
remote: 96526aa774ef: Verifying Checksum
remote: 96526aa774ef: Download complete
remote: 90ef3ffc5156: Verifying Checksum
remote: 90ef3ffc5156: Download complete
remote: 96526aa774ef: Pull complete
remote: 3130715204cf: Download complete
remote: 3130715204cf: Pull complete
remote: b06de8ab1c4f: Pull complete
remote: 90ef3ffc5156: Pull complete
remote: Digest: sha256:*********************
remote: Status: Downloaded newer image for node:18-alpine
remote:  ---> d1517ab6615b
remote: Step 2/9 : ARG SHOPIFY_API_KEY
remote:  ---> Running in a0a4bbb2f29d
remote: Removing intermediate container a0a4bbb2f29d
remote:  ---> a51af3d56c0f
remote: Step 3/9 : ENV SHOPIFY_API_KEY=$SHOPIFY_API_KEY
remote:  ---> Running in b128e5d562c4
remote: Removing intermediate container b128e5d562c4
remote:  ---> 705eae45ec16
remote: Step 4/9 : EXPOSE 8081
remote:  ---> Running in d74b22989e74
remote: Removing intermediate container d74b22989e74
remote:  ---> 9fdec74fff13
remote: Step 5/9 : WORKDIR /app
remote:  ---> Running in a82fa1548b29
remote: Removing intermediate container a82fa1548b29
remote:  ---> e45f7b65323c
remote: Step 6/9 : COPY web .
remote:  ---> 10c4e67ce894
remote: Step 7/9 : RUN npm install
remote:  ---> Running in 1c35ed85c3d7
remote: npm WARN deprecated @npmcli/[email protected]: This functionality has been moved to @npmcli/fs
remote: 
remote: added 410 packages, and audited 411 packages in 29s
remote: 
remote: 58 packages are looking for funding
remote:   run `npm fund` for details
remote: 
remote: found 0 vulnerabilities
remote: npm notice 
remote: npm notice New major version of npm available! 9.8.1 -> 10.2.3
remote: npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.2.3>
remote: npm notice Run `npm install -g [email protected]` to update!
remote: npm notice 
remote: Removing intermediate container 1c35ed85c3d7
remote:  ---> 4d88bf437e51
remote: Step 8/9 : RUN cd frontend && npm install && npm run build
remote:  ---> Running in 6f3b5bd183c1
remote: npm WARN deprecated [email protected]: Use your platform's native performance.now() and performance.timeOrigin.
remote: 
remote: added 1054 packages, and audited 1055 packages in 1m
remote: 
remote: 271 packages are looking for funding
remote:   run `npm fund` for details
remote: 
remote: found 0 vulnerabilities
remote: 
remote: > [email protected] build
remote: > NODE_OPTIONS=--max_old_space_size=4096 vite build
remote: 
remote: vite v4.5.0 building for production...
remote: transforming...
remote: ✓ 3562 modules transformed.
remote: rendering chunks...
remote: npm ERR! path /app/frontend
remote: npm ERR! command failed
remote: npm ERR! signal SIGKILL
remote: npm ERR! command sh -c NODE_OPTIONS=--max_old_space_size=4096 vite build
remote: 
remote: npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2023-11-02T21_19_09_421Z-debug-0.log
remote: The command '/bin/sh -c cd frontend && npm install && npm run build' returned a non-zero code: 1
remote: 
remote: Verifying deploy...
remote: 
remote: !       Push rejected to myapp.
remote: 
To https://git.heroku.com/myapp.git
! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/myapp.git'

Expected behavior

Should build.

Actual behavior

What actually happens?

Build Failure with Heap Memory Error and NPM Issues on Heroku