react scripts build failed to compile - reactjs

When deploying my create-react-app with heroku, My react scripts build fails, and it can not find some file.
But everything works just fine locally.
steps i did when deploying the app:
1) heroku create nameoftheApp --buildpack https://github.com/mars/create-react-app-buildpack.git.
2) run git push heroku master.
Thats all i did. Then I got the same error stating I have to Add node version. So I added the version. And this is what I got after adding the version and trying to redeploy again.
It might be stupid but I'm pretty new to Heroku (deploying apps in general) so im sorry about that.
remote: Creating an optimized production build...
remote: Failed to compile.
remote:
remote: ./src/components/pages/Home.js
remote: Cannot find file '../home-menu/MenuMain' in './src/components/pages'.
remote:
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! royal#0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the royal#0.1.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Related

AWS Amplify; Module not found in build

I have a custom-built CKEditor5 in a react application. I downloaded the custom-built CKEditor5 and included it in the source code like the image below.
Package layout
It is working and building locally fine with no problems. However, when I push to amplify, it fails to build
2022-09-23T19:22:53.142Z [INFO]: Creating an optimized production build...
2022-09-23T19:23:16.863Z [INFO]: Failed to compile.
2022-09-23T19:23:16.867Z [INFO]: Module not found: Error: Can't resolve 'ckeditor5-custom-build/build/ckeditor' in '/codebuild/output/src100157020/src/content-writing/src/Components'
2022-09-23T19:23:16.903Z [WARNING]: npm
2022-09-23T19:23:16.904Z [WARNING]: ERR! code ELIFECYCLE
npm ERR! errno 1
2022-09-23T19:23:16.906Z [WARNING]: npm
2022-09-23T19:23:16.906Z [WARNING]: ERR! content-writing#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the content-writing#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Any idea what is the issue or how to fix it?

git push heroku main => [remote rejected] main -> main (pre-receive hook declined)

I am building a React on Rails app. I tried to deploy to Heroku and am getting the following errors:
remote: npm ERR! code ERESOLVE
remote: npm ERR! ERESOLVE could not resolve
remote: npm ERR!
remote: npm ERR! While resolving: react-beautiful-dnd#13.1.0
remote: npm ERR! Found: react#18.2.0
remote: npm ERR! node_modules/react
remote: npm ERR! react#"^18.2.0" from the root project
remote: npm ERR! peer react#"^18.0.0" from #testing-library/react#13.3.0
remote: npm ERR! node_modules/#testing-library/react
remote: npm ERR! #testing-library/react#"^13.3.0" from the root project
remote: npm ERR! 6 more (react-dom, react-redux, react-router, react-router-dom, ...)
remote: npm ERR!
remote: npm ERR! Could not resolve dependency:
remote: npm ERR! peer react#"^16.8.5 || ^17.0.0" from react-beautiful-dnd#13.1.0
remote: npm ERR! node_modules/react-beautiful-dnd
remote: npm ERR! react-beautiful-dnd#"^13.1.0" from the root project
remote: npm ERR!
remote: npm ERR! Conflicting peer dependency: react#17.0.2
remote: npm ERR! node_modules/react
remote: npm ERR! peer react#"^16.8.5 || ^17.0.0" from react-beautiful-dnd#13.1.0
remote: npm ERR! node_modules/react-beautiful-dnd
remote: npm ERR! react-beautiful-dnd#"^13.1.0" from the root project
remote: npm ERR!
remote: npm ERR! Fix the upstream dependency conflict, or retry
remote: npm ERR! this command with --force, or --legacy-peer-deps
remote: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
remote: npm ERR!
remote: npm ERR! See /tmp/npmcache.r4FtS/eresolve-report.txt for a full report.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.r4FtS/_logs/2022-07-11T20_48_04_946Z-debug-0.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: Some possible problems:
remote:
remote: - Dangerous semver range (>) in engines.node
remote: https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile Node.js app.
remote:
remote: ! Push failed
remote: !
remote: ! ## Warning - The same version of this code has already been built: 883925893eb2737985f5bbd30770d374d9f94ee3
remote: !
remote: ! We have detected that you have triggered a build from source code with version 883925893eb2737985f5bbd30770d374d9f94ee3
remote: ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote: !
remote: ! If you are developing on a branch and deploying via git you must run:
remote: !
remote: ! git push heroku <branchname>:main
remote: !
remote: ! This article goes into details on the behavior:
remote: ! https://devcenter.heroku.com/articles/duplicate-build-version
remote:
remote: Verifying deploy...
remote:
remote: ! Push rejected to phase-5-capstone.
remote:
To https://git.heroku.com/phase-5-capstone.git
! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/phase-5-capstone.git'
I tried running git push heroku main --force and that did not solve the issue. I see their is an issue with dependencies for react and react-beautiful-dnd but am not sure how to go about this without breaking it. Does anyone have any ideas? Thank you!
It is due to a problem with the compatibility of react-beautiful-dnd version 13.1.0 and React version 18.2.0. Downgrade to react 17 and it will work, unless you're using React Suspense, Server components or any other React 18 features.
package.json
"react": "^17.0.2",
"react-dom": "^17.0.2",
If you can't downgrade, wait for the compatibility of the library react-beautiful-dnd with React 18. Take a look to github repository issues, other persons have the same problem and maybe soon it will be fixed. https://github.com/atlassian/react-beautiful-dnd/issues/2426

can not push react git repo on heroku

So I've cloned a github repo on my my own repo and did some edits. I'm trying to deploy it on heroku but I'm encountering errors I don't understand.
Can anyone provide step by step guide to fix the issues? or help me host the project? I'm a total noob at react.
-----> Building on the Heroku-20 stack
-----> Using buildpack: https://github.com/mars/create-react-app-buildpack.git
-----> React.js (create-react-app) multi app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 14.x
engines.npm (package.json): unspecified (use default)
Resolving node version 14.x...
Downloading and installing node 14.17.3...
Using default npm version: 6.14.13
-----> Installing dependencies
Installing node modules
> sqlite3#5.0.2 install /tmp/build_c9b2026f/node_modules/sqlite3
> node-pre-gyp install --fallback-to-build
[sqlite3] Success: "/tmp/build_c9b2026f/node_modules/sqlite3/lib/binding/napi-v3-linux-x64/node_sqlite3.node" is installed via remote
> nodemon#2.0.7 postinstall /tmp/build_c9b2026f/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
> node-sass#5.0.0 install /tmp/build_c9b2026f/node_modules/node-sass
> node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v5.0.0/linux-x64-83_binding.node
Download complete
Binary saved to /tmp/build_c9b2026f/node_modules/node-sass/vendor/linux-x64-83/binding.node
Caching binary to /tmp/npmcache.Hxxdz/_cacache/node-sass/5.0.0/linux-x64-83_binding.node
> node-sass#5.0.0 postinstall /tmp/build_c9b2026f/node_modules/node-sass
> node scripts/build.js
Binary found at /tmp/build_c9b2026f/node_modules/node-sass/vendor/linux-x64-83/binding.node
Testing binary
Binary is fine
added 1408 packages in 19.854s
-----> Build
Running build
> show-me-the-money#0.4.0 build /tmp/build_c9b2026f
> run-p build:client build:server
> show-me-the-money#0.4.0 build:client /tmp/build_c9b2026f
> npm run webpack -- --mode production
> show-me-the-money#0.4.0 build:server /tmp/build_c9b2026f
> npm run knex -- migrate:latest
> show-me-the-money#0.4.0 knex /tmp/build_c9b2026f
> knex --knexfile ./server/db/knexfile.js "migrate:latest"
> show-me-the-money#0.4.0 webpack /tmp/build_c9b2026f
> webpack --config ./client/webpack.config.js "--mode" "production"
Working directory changed to /tmp/build_c9b2026f/server/db
Using environment: production
Error: Unable to acquire a connection
at Client_PG.acquireConnection (/tmp/build_c9b2026f/node_modules/knex/lib/client.js:339:13)
at Runner.ensureConnection (/tmp/build_c9b2026f/node_modules/knex/lib/runner.js:264:8)
at Runner.run (/tmp/build_c9b2026f/node_modules/knex/lib/runner.js:26:12)
at SchemaBuilder.Target.then (/tmp/build_c9b2026f/node_modules/knex/lib/interface.js:22:43)
at ensureTable (/tmp/build_c9b2026f/node_modules/knex/lib/migrate/table-creator.js:13:6)
at listCompleted (/tmp/build_c9b2026f/node_modules/knex/lib/migrate/migration-list-resolver.js:12:9)
at Object.listAllAndCompleted (/tmp/build_c9b2026f/node_modules/knex/lib/migrate/migration-list-resolver.js:28:5)
at Migrator.latest (/tmp/build_c9b2026f/node_modules/knex/lib/migrate/Migrator.js:64:57)
at Command.<anonymous> (/tmp/build_c9b2026f/node_modules/knex/bin/cli.js:171:55)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! show-me-the-money#0.4.0 knex: `knex --knexfile ./server/db/knexfile.js "migrate:latest"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the show-me-the-money#0.4.0 knex 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.Hxxdz/_logs/2021-07-20T09_05_44_051Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! show-me-the-money#0.4.0 build:server: `npm run knex -- migrate:latest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the show-me-the-money#0.4.0 build:server 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.Hxxdz/_logs/2021-07-20T09_05_44_110Z-debug.log
ERROR: "build:server" exited with 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! show-me-the-money#0.4.0 build: `run-p build:client build:server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the show-me-the-money#0.4.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.Hxxdz/_logs/2021-07-20T09_05_44_162Z-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 React.js (create-react-app) multi app.
! Push failed
Here is link to my repo https://github.com/OsamaB7/Bartering

Difficulty in deploying my MERN app to Heroku

I am not able to deploy my app on Heroku and I am getting the following error every same time I try to push my code to Heroku.
First, I created my Heroku app using the command heroku create. Then I added and committed all the modified files to the git staging area and finally when I tried to push to Heroku using git it failed in the post-build part.
Command that I am using for pushing my code: git push heroku master
Error that I am getting:
remote: -----> Build
remote: Running heroku-postbuild
remote:
remote: > dev-community-starter#1.0.0 heroku-postbuild /tmp/build_d493d086
remote: > NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
remote:
remote:
remote: > core-js#2.6.12 postinstall /tmp/build_d493d086/client/node_modules/babel-runtime/node_modules/core-js
remote: > node -e "try{require('./postinstall')}catch(e){}"
remote:
remote:
remote: > core-js#3.8.1 postinstall /tmp/build_d493d086/client/node_modules/core-js
remote: > node -e "try{require('./postinstall')}catch(e){}"
remote:
remote:
remote: > core-js-pure#3.8.1 postinstall /tmp/build_d493d086/client/node_modules/core-js-pure
remote: > node -e "try{require('./postinstall')}catch(e){}"
remote:
remote:
remote: > ejs#2.7.4 postinstall /tmp/build_d493d086/client/node_modules/ejs
remote: > node ./postinstall.js
remote:
remote: added 1937 packages from 730 contributors and audited 1942 packages in 48.194s
remote:
remote: 123 packages are looking for funding
remote: run `npm fund` for details
remote:
remote: found 5928 vulnerabilities (209 moderate, 5719 high)
remote: run `npm audit fix` to fix them, or `npm audit` for details
remote:
remote: > client#0.1.0 build /tmp/build_d493d086/client
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Browserslist: caniuse-lite is outdated. Please run:
remote: npx browserslist#latest --update-db
remote:
remote: Why you should do it regularly:
remote: https://github.com/browserslist/browserslist#browsers-data-updating
remote: Failed to compile.
remote:
remote: ./src/utils/api.js
remote: Cannot find module: 'axios'. Make sure this package is installed.
remote:
remote: You can install this package by running: yarn add axios.
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.DNuM9/_logs/2021-06-24T11_06_31_565Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! dev-community-starter#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 dev-community-starter#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.DNuM9/_logs/2021-06-24T11_06_31_594Z-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: Some possible problems:
remote:
remote: - Node version not specified in package.json
remote: https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:
remote: - A module may be missing from 'dependencies' in package.json
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys#ensure-you-aren-t-relying-on-untracked-dependencies
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile Node.js app.
remote:
remote: ! Push failed
remote: !
remote: ! ## Warning - The same version of this code has already been built: b76c1f2afa5b943b747dc113ff0dc1004c044030
remote: !
remote: ! We have detected that you have triggered a build from source code with version b76c1f2afa5b943b747dc113ff0dc1004c044030
remote: ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote: !
remote: ! If you are developing on a branch and deploying via git you must run:
remote: !
remote: ! git push heroku <branchname>:main
remote: !
remote: ! This article goes into details on the behavior:
remote: ! https://devcenter.heroku.com/articles/duplicate-build-version
remote:
remote: Verifying deploy...
remote:
remote: ! Push rejected to intense-reef-14591.
remote:
To https://git.heroku.com/intense-reef-14591.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/intense-reef-14591.git'
Can anyone please guide me as to how to solve this error?
I asume you already checked the following problems right?
remote: Some possible problems:
remote:
remote: - Node version not specified in package.json
remote: https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:
remote: - A module may be missing from 'dependencies' in package.json
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys#ensure-you-aren-t-relying-on-untracked-dependencies
You can also try not to include the node_modules folder in the push.
Also try to push it trough heroku web and a github repo
According to the error logs, the axios package is not installed as a dependency in your package.json.
It may be possible that you have installed Axios globally on your device hence it will be working locally but during the Heroku deploy, it's unable to find that dependency.
So install it by running the command:
npm install axios
and try again. If the same problem persists then sharee your package.json file.

How to deploy angular gulp app to heroku without nodejs

I have this theme that I want to deploy to heroku. The problem is that I am not using nodejs in it but all the tutorial I came across uses node, yaemon etc which is not my case.
I have tried creating procfile
web: node app.js
but there was an error deploying.
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=true
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version (latest stable) via semver.io...
remote: Downloading and installing node 5.11.1...
remote: Using default npm version: 3.8.6
remote:
remote: -----> Restoring cache
remote: Skipping cache restore (new runtime signature)
remote:
remote: -----> Building dependencies
remote: Installing node modules (package.json)
remote:
remote: > blur_admin#1.2.0 postinstall /tmp/build_5d79cad1abda92d62d5cf18
0cf8e22c1
remote: > bower install
remote:
remote: sh: 1: bower: not found
remote:
remote: npm ERR! Linux 3.13.0-91-generic
remote: npm ERR! argv "/tmp/build_5d79cad1abda92d62d5cf180cf8e22c1/.herok
u/node/bin/node" "/tmp/build_5d79cad1abda92d62d5cf180cf8e22c1/.heroku/node/bin/n
pm" "install" "--unsafe-perm" "--userconfig" "/tmp/build_5d79cad1abda92d62d5cf18
0cf8e22c1/.npmrc"
remote: npm ERR! node v5.11.1
remote: npm ERR! npm v3.8.6
remote: npm ERR! file sh
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno ENOENT
remote: npm ERR! syscall spawn
remote: npm ERR! blur_admin#1.2.0 postinstall: `bower install`
remote: npm ERR! spawn ENOENT
remote: npm ERR!
remote: npm ERR! Failed at the blur_admin#1.2.0 postinstall script 'bower
install'.
remote: npm ERR! Make sure you have the latest version of node.js and npm
installed.
remote: npm ERR! If you do, this is most likely a problem with the blur_a
dmin package,
remote: npm ERR! not with npm itself.
remote: npm ERR! Tell the author that this fails on your system:
remote: npm ERR! bower install
remote: npm ERR! You can get information on how to open an issue for this
project with:
remote: npm ERR! npm bugs blur_admin
remote: npm ERR! Or if that isn't available, you can get their info via:
remote: npm ERR! npm owner ls blur_admin
remote: npm ERR! There is likely additional logging output above.
remote:
remote: npm ERR! Please include the following file with any support reque
st:
remote: npm ERR! /tmp/build_5d79cad1abda92d62d5cf180cf8e22c1/npm-debu
g.log
remote:
remote: -----> Build failed
remote:
remote: We're sorry this build is failing! You can troubleshoot common is
sues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploy
s
remote:
remote: Some possible problems:
remote:
remote: - Node version not specified in package.json
remote: https://devcenter.heroku.com/articles/nodejs-support#specifying-a
-node-js-version
remote:
remote: - Bower may not be tracked in package.json
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploy
s#ensure-you-aren-t-relying-on-untracked-dependencies
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile Node.js app.
remote:
Can anybody help?
Thanks
It seems that you didn't add "bower" as a dependency. Check your package.json file. You'll need to have a "bower" entry in the "dependencies" section. Something like:
"dependencies": {
"bower": "^1.8.0",
}
Maybe you already have bower has a devDepencendy, but for Heroku you need to put it this other section too. You could also check this link, that has another way of doing it.
Hope it helps!

Resources