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

CodePudding user response：

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.