Im unable to deploy my react app to Heroku. It returns this error:
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/directto-web.git'
I dont know what im doing wrong. I already deployed other react app's to Heroku before and this never happened. Im using this buildpack.
Build log from Heroku:
-----> Building on the Heroku-20 stack
-----> Using buildpack: mars/create-react-app
-----> 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): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 16.x...
Downloading and installing node 16.14.2...
Using default npm version: 8.5.0
-----> Installing dependencies
Installing node modules (package.json)
added 1255 packages, and audited 1256 packages in 41s
174 packages are looking for funding
run `npm fund` for details
12 vulnerabilities (5 moderate, 7 high)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
-----> Build
Running build
> [email protected] build
> react-scripts build
Creating an optimized production build...
Failed to compile.
Module not found: Error: Can't resolve '../../Assets/directto-logomarca.png' in '/tmp/build_b41f4669/src/Components/Searchbar'
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
! Push rejected, failed to compile React.js (create-react-app) multi app.
! Push failed
I saw this error on the build log:
Module not found: Error: Can't resolve '../../Assets/directto-logomarca.png' in '/tmp/build_b41f4669/src/Components/Searchbar'
I have no idea why it cant resolve the file, as it is located exactly where i specified. Can someone help me?
Thanks in advance.
EDIT: My package.json.
{
"name": "directto_web",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.0.1",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"react": "^18.0.0",
"react-bootstrap": "^2.2.3",
"react-dom": "^18.0.0",
"react-icons": "^4.3.1",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-world-flags": "^1.4.0",
"styled-components": "^5.3.5",
"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"
]
}
}
Most likely your reference to your assets directory is wrong. While you import source code by referencing relative your current file, you should reference assets as if you are in your public directory.
Assuming you have a structure like
/public/
/assets/
/some.png
index.html
You should refence your assets folder from your source code like
'assets/some.png'
As if public is your root. Assumption based on common CRA structure.
If this assumption is wrong, please share your folder structure.