Deployment not working on Heroku.

[XaFaK-01]

Describe the bug

I can run it on my local system but cannot run it on Heroku. After deploying to Heroku and defining all the environment variables in the Heroku "Config Vars" section, the deployment is not working.

The following are the configurations: Scripts in: packachange.json:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon app.ts",
    "start": "ts-node app.ts"
  }, 

and I only have a single app.ts configuration:

const adminJS = new AdminJS({
  databases: [],
  rootPath: "/",
  branding: {
   ...
  },
  componentLoader,
  dashboard: {
    component: Components.Dashboard,
    handler: dashboardHandler,
  },
  resources: [
  ...
  ],
});


// @ts-ignore
const authenticate = async (email, password) => {
  // @ts-ignore
  const user = await Admin.findOne({ email });
  if (user) {
    if (await bcrypt.compare(password, user.password)) {
      return user;
    }
  }
  return false;
};

const adminJSRouter = AdminJSExpress.buildAuthenticatedRouter(
  adminJS,
  {
    authenticate,
    cookieName: process.env.COOKIE_NAME,
    // @ts-ignore
    cookiePassword: process.env.COOKIE_PASSWORD,
  },
  null,
  {
    store: MongoStore.create({
      mongoUrl: process.env.MONGO_URI_DEV,
      touchAfter: 24 * 3600, // time period in seconds
    }),
    resave: true,
    saveUninitialized: true,
    secret: process.env.SESSION_SECRET,
    cookie: {
      httpOnly: process.env.NODE_ENV === "production",
      secure: process.env.NODE_ENV === "production",
    },
    name: process.env.COOKIE_NAME,
  },
);


// mount adminJS route and run express app
const app = express();

const PORT = process.env.PORT || 3000;

app.use(adminJS.options.rootPath, adminJSRouter);

mongoose.connect(
  `${
    process.env.NODE_ENV === "development" ? process.env.MONGO_URI_DEV : process.env.MONGO_URI_PROD
  }`,
);

app.listen(PORT, () =>
  console.log(`AdminJS started on http://localhost:${PORT}${adminJS.options.rootPath}`),
);

To be specific, I am getting the following error: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

Any help will be really appreciated!

Installed libraries and their versions

• "adminjs": "^6.6.5",
• "@adminjs/express": "^5.0.1",
• "@adminjs/mongoose": "^3.0.1",
• "express": "^4.18.2",
• "mongoose": "^6.7.2",

[dziraf]

Try to add this env in heroku:

NODE_OPTIONS=--max_old_space_size=2048

[XaFaK-01]

--max_old_space_size=2048

Now I am able to see the login screen. But as soon as I log in, the app crashes with the following error: Error R15 (Memory quota vastly exceeded)

[dziraf]

Do you have NODE_ENV set to production?

[XaFaK-01]

Do you have NODE_ENV set to production?

yes

[dziraf]

How many custom components do you have? Do you use any heavy weight UI libraries like MUI?

[XaFaK-01]

How many custom components do you have? Do you use any heavy weight UI libraries like MUI?

No, I am not using any UI library but the plain simple "Styled Components" where you made CSS components within the React Component File.

But other than that, I am using some libraries for Charts. In this case, "recharts".

BTW, here's a complete list of all the dependencies that I am using:

"@adminjs/design-system": "^3.0.4",
  "@adminjs/express": "^5.0.1",
  "@adminjs/logger": "^4.0.1",
  "@adminjs/mongoose": "^3.0.1",
  "@carbon/icons-react": "^11.11.0",
  "@tiptap/core": "^2.0.0-beta.193",
  "@types/bcryptjs": "^2.4.2",
  "@types/express-session": "^1.17.5",
  "@types/mongoose": "^5.11.97",
  "@types/node": "^18.11.9",
  "adminjs": "^6.6.5",
  "axios": "^1.2.0",
  "bcryptjs": "^2.4.3",
  "connect-mongo": "^4.6.0",
  "d3-scale": "^4.0.2",
  "d3-scale-chromatic": "^3.0.0",
  "dotenv": "^16.0.3",
  "express": "^4.18.2",
  "express-formidable": "^1.2.0",
  "express-session": "^1.17.3",
  "firebase": "^9.0.2",
  "flat": "^5.0.2",
  "mongodb": "^4.12.1",
  "mongoose": "^6.7.2",
  "nodemailer": "^6.8.0",
  "nodemon": "^2.0.20",
  "prop-types": "^15.8.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-is": "^18.2.0",
  "react-redux": "^8.0.5",
  "react-router": "^6.4.3",
  "react-router-dom": "^6.4.3",
  "recharts": "^2.1.16",
  "redux": "^4.2.0",
  "slugify": "^1.6.5",
  "styled-components": "^5.3.6",
  "styled-system": "^5.1.5",
  "ts-node": "^10.9.1",
  "tslib": "^2.4.1",
  "typescript": "^4.9.3"

[XaFaK-01]

So, what do you suggest I do?

[dziraf]

Are you able to check the size of components.bundle.js locally? Honestly, can't really help much here, I've deployed two apps to Heroku this week without issues.

[XaFaK-01]

I ended up using another platform probably because my bundle size was too large for Heroku to handle. Thank you for the explanation along the way.