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
Description
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"
}
}