Question 246646 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Error: Cannot find module 'cors' when Deploying Node.js x React App to Heroku

Background

I am trying to deploy a web application developed with Node.js and React on Heroku. I am using the Basic Dyno Types on Heroku.

The frontend resides in the root directory, and the backend is located under the server directory.

The directory structure is roughly as follows:

MyProjectRoot/
├── build/
├── node_modules/
├── package.json
├── package-lock.json
├── public/
├── Procfile
├── src/
│   ├── App.js
│   └── index.js
└── server/
    ├── node_modules/
    ├── package.json
    ├── package-lock.json
    └── index.js

Problem & Error Message

2023-09-18T04:40:57.634875+00:00 heroku[web.1]: Starting process with command `node server/index.js`
2023-09-18T04:40:58.849630+00:00 app[web.1]: node:internal/modules/cjs/loader:1080
2023-09-18T04:40:58.849651+00:00 app[web.1]: throw err;
2023-09-18T04:40:58.849651+00:00 app[web.1]: ^
2023-09-18T04:40:58.849651+00:00 app[web.1]: 
2023-09-18T04:40:58.849651+00:00 app[web.1]: Error: Cannot find module 'cors'
2023-09-18T04:40:58.849651+00:00 app[web.1]: Require stack:
2023-09-18T04:40:58.849653+00:00 app[web.1]: - /app/server/index.js
2023-09-18T04:40:58.849656+00:00 app[web.1]: at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
2023-09-18T04:40:58.849657+00:00 app[web.1]: at Module._load (node:internal/modules/cjs/loader:922:27)
2023-09-18T04:40:58.849658+00:00 app[web.1]: at Module.require (node:internal/modules/cjs/loader:1143:19)
2023-09-18T04:40:58.849658+00:00 app[web.1]: at require (node:internal/modules/cjs/helpers:121:18)
2023-09-18T04:40:58.849658+00:00 app[web.1]: at Object.<anonymous> (/app/server/index.js:7:14)
2023-09-18T04:40:58.849658+00:00 app[web.1]: at Module._compile (node:internal/modules/cjs/loader:1256:14)
2023-09-18T04:40:58.849658+00:00 app[web.1]: at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
2023-09-18T04:40:58.849659+00:00 app[web.1]: at Module.load (node:internal/modules/cjs/loader:1119:32)
2023-09-18T04:40:58.849659+00:00 app[web.1]: at Module._load (node:internal/modules/cjs/loader:960:12)
2023-09-18T04:40:58.849661+00:00 app[web.1]: at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
2023-09-18T04:40:58.849663+00:00 app[web.1]: code: 'MODULE_NOT_FOUND',
2023-09-18T04:40:58.849663+00:00 app[web.1]: requireStack: [ '/app/server/index.js' ]
2023-09-18T04:40:58.849663+00:00 app[web.1]: }
2023-09-18T04:40:58.853044+00:00 app[web.1]: 
2023-09-18T04:40:58.853046+00:00 app[web.1]: Node.js v18.17.1
2023-09-18T04:40:58.966012+00:00 heroku[web.1]: Process exited with status 1
2023-09-18T04:40:58.998730+00:00 heroku[web.1]: State changed from starting to crashed
2023-09-18T04:51:25.065554+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=xxxxxxx.herokuapp.com request_id=fa84c2bb-1795-4c08-be57-c4cfd1a0dee3 fwd="124.144.141.110" dyno= connect= service= status=503 bytes= protocol=https
2023-09-18T04:51:25.371635+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=xxxxxxx.herokuapp.com request_id=3c078552-a36e-4cba-bc5f-aa1fdfe21750 fwd="124.144.141.110" dyno= connect= service= status=503 bytes= protocol=https

Relevant Source Code

index.js under server directory

const he = require('he');
const express = require('express');
const path = require('path');
const cors = require('cors');
const axios = require('axios');
const database = require('./database');

const app = express();

app.use(cors());
app.use(express.json());

app.use(express.static(path.join(__dirname, '..', 'build')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '..', 'build', 'index.html'));
});

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

app.listen(PORT, () => console.log(`Server listening on port ${PORT}`));

package.json under server directory

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcrypt": "^5.1.0",
    "cors": "^2.8.5",
    "date-fns-tz": "^2.0.0",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "firebase": "^10.3.0",
    "firebase-admin": "^11.10.1",
    "he": "^1.2.0",
    "jsonwebtoken": "^9.0.1",
    "pg": "^8.11.3",
    "sequelize": "^6.33.0",
    "sequelize-cli": "^6.6.1",
    "uuid": "^9.0.0"
  }
}

package.json in the root directory

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@hookform/resolvers": "^3.1.1",
    "@mui/icons-material": "^5.14.1",
    "@mui/material": "^5.14.2",
    "@reduxjs/toolkit": "^1.9.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.4.0",
    "dompurify": "^3.0.5",
    "firebase": "^10.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.45.2",
    "react-query": "^3.39.3",
    "react-quill": "^2.0.0",
    "react-router-dom": "^6.14.1",
    "react-scripts": "5.0.1",
    "redux": "^4.2.1",
    "redux-thunk": "^2.4.2",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4",
    "yup": "^1.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Procfile

web: node server/index.js

.gitignore

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/server/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
/server/.env

npm-debug.log*
yarn-debug.log*
yarn-error.log*

Additional Information

Local environment versions:

  • Node v18.16.1
  • React v18.2.0

What I Want to Achieve

I want to deploy a web application developed with Node.js and React on Heroku.

What I’ve Tried

I modified the Procfile as follows:

web: cd server && node index.js

I also added a script to the package.json in the root directory, but the issue remains unchanged.

"postinstall": "npm run build"

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved the problem by adding the following code. Thank you.

    "scripts": {
"heroku-postbuild": "npm install --prefix server"
}

  2. 0

    To fix this problem run this command on your project command line like terminal

    npm i cors 

or

npm i
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search