React app deploy with Heroku not working. Module not found: Error: Can't resolve (...) in "/tmp/build..."

Question

我无法将我的 React 应用程序部署到 Heroku。它returns这个错误：

 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/directto-web.git'

我不知道我做错了什么。我之前已经将其他 React 应用程序部署到 Heroku，但这从未发生过。我正在使用 this buildpack.

从 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

       

       > directto_web@0.1.0 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

我在构建日志中看到了这个错误：

Module not found: Error: Can't resolve '../../Assets/directto-logomarca.png' in '/tmp/build_b41f4669/src/Components/Searchbar'

我不知道为什么它无法解析文件，因为它正好位于我指定的位置。有人可以帮助我吗？

提前致谢。

编辑：我的 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"
    ]
  }
}

Answer 1

您对资产目录的引用很可能是错误的。当您通过引用当前文件的相对路径导入源代码时，您应该像在 public 目录中一样引用资产。

假设您的结构类似于

 /public/
   /assets/
    /some.png
 index.html

您应该从您的源代码中引用您的资产文件夹，例如

 'assets/some.png'

就好像 public 是你的根。基于共同 CRA 结构的假设。

如果这个假设是错误的，请分享您的文件夹结构。

React app deploy with Heroku not working. Module not found: Error: Can't resolve (...) in "/tmp/build..."

React app deploy with Heroku not working. Module not found: Error: Can't resolve (...) in "/tmp/build..."

deployment

build

heroku

reactjs