I am following a Udemy course and the github repo is located here: https://github.com/StephenGrider/FullstackReactCode. 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 included links to suggested solutions but they don't match my project's package.json structures so the solutions aren't helpful. I've also tried to install eslint as a dependency in both JSON packages but that hasn't worked either.
Possible solutions: Why is 'type: module' in package.json file? https://github.com/eslint/eslint/issues/14137 ESlint - Error: Must use import to load ES Module
This is my error:
$ 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 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"
}
}
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"
]
}
}
