search

StephenGrider / FullstackReactCode

Companion repo to https://www.udemy.com/node-with-react-fullstack-web-development
1.39k stars 1.17k forks source link

Bug: Heroku Deployment error with this project. The error message points to, and suggests a solution to, the eslint module in the node_modules folder where 'require() of ES modules is not supported' #103

Open ahauser16 opened 2 years ago

ahauser16 commented 2 years ago

The error occurs when I try to deploy the application to git and push to Heroku. When I follow these steps Heroku is supposed to automatically install all of the project's server-side dependencies which is caused by a 'heroku-postbuild' script in the server-side-folder JSON package. After Heroku runs all of the server's dependencies, it is supposed to automatically run a 'heroku-postbuild' script that instructs Heroku to (1) install all of the client-side dependencies in the client-side-folder JSON package and then (2) run the command 'npm run build' from within the client-folder directory. After these steps Heroku is supposed to try to start the application but I get the error below. FYI--I followed the directions within the error message but they didn't work. I've also tried to install eslint as a dependency in both JSON packages which hasn't made a difference for better or for worse.

This is the full error from my console:

$ git push heroku master
Enumerating objects: 74, done.
Counting objects: 100% (74/74), done.
Delta compression using up to 12 threads
Compressing objects: 100% (59/59), done.
Writing objects: 100% (63/63), 170.95 KiB | 5.18 MiB/s, done.
Total 63 (delta 17), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Building on the Heroku-20 stack
remote: -----> Using buildpack: heroku/nodejs
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  12.16.3
remote:        engines.npm (package.json):   6.14.4
remote:
remote:        Resolving node version 12.16.3...
remote:        Downloading and installing node 12.16.3...
remote:        npm 6.14.4 already installed with node
remote:        
remote: -----> Restoring cache
remote:        - node_modules
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules
remote:        
remote:        > nodemon@2.0.15 postinstall /tmp/build_fc9f4df1/node_modules/nodemon
remote:        > node bin/postinstall || exit 0
remote:
remote:        Love nodemon? You can now support the project via the open collective:
remote:         > https://opencollective.com/nodemon/donate
remote:
remote:        added 295 packages in 4.112s
remote:        
remote: -----> Build
remote:        Running heroku-postbuild
remote:        
remote:        > server@1.0.0 heroku-postbuild /tmp/build_fc9f4df1
remote:        > NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
remote:
remote:        
remote:        > core-js@3.21.1 postinstall /tmp/build_fc9f4df1/client/node_modules/core-js
remote:        > node -e "try{require('./postinstall')}catch(e){}"
remote:
remote:        
remote:        > core-js-pure@3.21.1 postinstall /tmp/build_fc9f4df1/client/node_modules/core-js-pure  
remote:        > node -e "try{require('./postinstall')}catch(e){}"
remote:
remote:        added 1434 packages from 699 contributors and audited 1436 packages in 19.485s
remote:        
remote:        169 packages are looking for funding
remote:          run `npm fund` for details
remote:
remote:        found 4 moderate severity vulnerabilities
remote:          run `npm audit fix` to fix them, or `npm audit` for details
remote:        
remote:        > client@0.1.0 build /tmp/build_fc9f4df1/client
remote:        > react-scripts build
remote:
remote:        Creating an optimized production build...
remote:        Failed to compile.
remote:
remote:        Must use import to load ES Module: /tmp/build_fc9f4df1/client/node_modules/@eslint/eslintrc/universal.js
remote:        require() of ES modules is not supported.
remote:        require() of /tmp/build_fc9f4df1/client/node_modules/@eslint/eslintrc/universal.js from 
/tmp/build_fc9f4df1/client/node_modules/eslint/lib/linter/linter.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
remote:        Instead rename universal.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /tmp/build_fc9f4df1/client/node_modules/@eslint/eslintrc/package.json.  
remote:
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! client@0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the client@0.1.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.fuU8Z/_logs/2022-03-18T18_29_34_363Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! server@1.0.0 heroku-postbuild: `NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the server@1.0.0 heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.fuU8Z/_logs/2022-03-18T18_29_34_382Z-debug.log
remote: 
remote: -----> Build failed
remote:        
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:
remote:        Love,
remote:        Heroku
remote:
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !       Push rejected to stormy-journey-31783.
remote:
To https://git.heroku.com/stormy-journey-31783.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/stormy-journey-31783.git'

This is my Heroku Build Log:


-----> Building on the Heroku-20 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected

-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true

-----> Installing binaries
       engines.node (package.json):  12.16.3
       engines.npm (package.json):   6.14.4

       Resolving node version 12.16.3...
       Downloading and installing node 12.16.3...
       npm 6.14.4 already installed with node

-----> Restoring cache
       - node_modules

-----> Installing dependencies
       Installing node modules

       > nodemon@2.0.15 postinstall /tmp/build_40a7066f/node_modules/nodemon
       > node bin/postinstall || exit 0

       Love nodemon? You can now support the project via the open collective:
        > https://opencollective.com/nodemon/donate

       added 228 packages in 3.89s

-----> Build
       Running heroku-postbuild

       > server@1.0.0 heroku-postbuild /tmp/build_40a7066f
       > NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client

       > core-js@3.21.1 postinstall /tmp/build_40a7066f/client/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"

       > core-js-pure@3.21.1 postinstall /tmp/build_40a7066f/client/node_modules/core-js-pure
       > node -e "try{require('./postinstall')}catch(e){}"

       added 1435 packages from 699 contributors and audited 1437 packages in 20.981s

       169 packages are looking for funding
         run `npm fund` for details

       found 4 moderate severity vulnerabilities
         run `npm audit fix` to fix them, or `npm audit` for details

       > client@0.1.0 build /tmp/build_40a7066f/client
       > react-scripts build

       Creating an optimized production build...
       Failed to compile.

       Must use import to load ES Module: /tmp/build_40a7066f/client/node_modules/@eslint/eslintrc/universal.js
       require() of ES modules is not supported.
       require() of /tmp/build_40a7066f/client/node_modules/@eslint/eslintrc/universal.js from /tmp/build_40a7066f/client/node_modules/eslint/lib/linter/linter.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
       Instead rename universal.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /tmp/build_40a7066f/client/node_modules/@eslint/eslintrc/package.json.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the client@0.1.0 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!     /tmp/npmcache.PAGiQ/_logs/2022-03-15T22_15_39_679Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! server@1.0.0 heroku-postbuild: `NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the server@1.0.0 heroku-postbuild 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!     /tmp/npmcache.PAGiQ/_logs/2022-03-15T22_15_39_694Z-debug.log
-----> Build failed

       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys

       If you're stuck, please submit a ticket so we can help:
       https://help.heroku.com/

       Love,
       Heroku

 !     Push rejected, failed to compile Node.js app.
 !     Push failed

This is my package.json file in the client-side folder directory:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.1",
    "eslint": "^8.11.0",
    "http-proxy-middleware": "^2.0.3",
    "materialize-css": "^1.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^5.3.0",
    "react-scripts": "5.0.0",
    "react-stripe-checkout": "^2.6.3",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "web-vitals": "^2.1.4"
  },
  "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"
    ]
  }
}

This is my package.json file in the server-side folder directory:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "engines": {
    "node": "12.16.3",
    "npm": "6.14.4"
  },
  "scripts": {
    "start": "node index",
    "server": "nodemon index",
    "client": "npm run start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.2",
    "concurrently": "^7.0.0",
    "cookie-session": "^2.0.0",
    "eslint": "^8.11.0",
    "express": "^4.17.1",
    "mongoose": "^6.2.4",
    "nodemon": "^2.0.15",
    "passport": "^0.5.2",
    "passport-google-oauth20": "^2.0.0",
    "stripe": "^8.209.0"
  }
}
lildevinhouse commented 2 years ago

Hi! I faced with the same problem and solved it by changing Node version (including engines params in my package.json). This is my package.json:

{ "name": "server", "version": "1.0.0", "description": "", "main": "index.js", "engines": { "node": "16.3.0", "npm": "8.5.4" }, "scripts": { "start": "node index.js", "server": "nodemon index.js", "client": "npm run start --prefix client", "dev": "concurrently \"npm run server\" \"npm run client\"", "heroku-postbuild":"NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client" }, "author": "", "license": "ISC", "dependencies": { "bcryptjs": "^2.4.3", "concurrently": "^5.3.0", "cookie-parser": "^1.4.6", "cookie-session": "^1.4.0", "cors": "^2.8.5", "express": "^4.18.1", "mongoose": "^5.13.14", "nodemon": "^2.0.4", "passport": "^0.4.1", "passport-google-oauth20": "^2.0.0", "passport-local": "^1.0.0", "passport-youtube-v3": "^2.1.0" } }

I hope this helps :)