Heroku - Node.js - React App - 構建失敗 - “找不到文件”

Question

我是heroku的新手。 我已經構建了一個帶有react的測試應用程序並將其加載到heroku 。 react應用程序很舊，包含許多過時的軟件包。 我把它上傳到heroku 。 那工作得很好。

之后，我進行了幾項重大的本地更改（升級包、更改應用程序本身等）。 然后我希望它再次使用命令上傳到heroku

git push heroku master

不幸的是，總是會出現此錯誤消息：

remote:        Creating an optimized production build...
remote:        Failed to compile.
remote:
remote:        ./src/App.js
remote:        Cannot find file './components/background' in './src'.

在本地我可以使用命令構建應用程序

npm run build

沒有錯誤。 我還檢查了這些 stackoverflow 帖子，但沒有成功：

在 Heroku 構建后，找不到文件

heroku 部署錯誤 npm ERR！ 代碼 ELIFECYCLE errno1

我檢查了

• 拼寫（區分大小寫）
• 清除構建緩存
• 將node.js和npm升級到當前版本（與命令git push heroku master

實際上首先，錯誤提到了一個不同的文件（ home.js ）。 我將文件復制到最后，然后將background.js提到為有問題的文件。

這是完整的日志：

D:\Files\Projects\react\dnsnx>git push heroku master
Enumerating objects: 65, done.
Counting objects: 100% (65/65), done.
Delta compression using up to 4 threads
Compressing objects: 100% (50/50), done.
Writing objects: 100% (50/50), 18.66 MiB | 978.00 KiB/s, done.
Total 50 (delta 30), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  12.13.0
remote:        engines.npm (package.json):   unspecified (use default)
remote:
remote:        Resolving node version 12.13.0...
remote:        Downloading and installing node 12.13.0...
remote:        Using default npm version: 6.12.0
remote:
remote: -----> Installing dependencies
remote:        Installing node modules (package.json + package-lock)
remote:
remote:        > core-js@2.6.10 postinstall /tmp/build_bec5778160dce30fbe2726b3a5e7fec1/node_modules/babel-runtime/node_modules/core-js
remote:        > node postinstall || echo "ignore"
remote:
remote:
remote:        > core-js@3.2.1 postinstall /tmp/build_bec5778160dce30fbe2726b3a5e7fec1/node_modules/core-js
remote:        > node scripts/postinstall || echo "ignore"
remote:
remote:
remote:        > styled-components@4.4.1 postinstall /tmp/build_bec5778160dce30fbe2726b3a5e7fec1/node_modules/styled-components
remote:        > node ./scripts/postinstall.js || exit 0
remote:
remote:        Use styled-components at work? Consider supporting our development efforts at https://opencollective.com/styled-components
remote:        added 1525 packages from 714 contributors and audited 905128 packages in 37.127s
remote:        found 0 vulnerabilities
remote:
remote:
remote: -----> Build
remote:        Running build
remote:
remote:        > dnsnx@0.1.3 build /tmp/build_bec5778160dce30fbe2726b3a5e7fec1
remote:        > react-scripts build
remote:
remote:        Creating an optimized production build...
remote:        Failed to compile.
remote:
remote:        ./src/App.js
remote:        Cannot find file './components/background' in './src'.
remote:
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! dnsnx@0.1.3 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the dnsnx@0.1.3 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.tCGd1/_logs/2019-11-09T14_08_58_517Z-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 testappdnsnx.
remote:
To https://git.heroku.com/testappdnsnx.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/testappdnsnx.git'

這是文件結構：

這是App.js的代碼：

import React, { Component } from 'react';
import { HashRouter, Route } from 'react-router-dom';
import ScrollToTop from 'react-scroll-up';
import NavBar from './components/navbar';
import Footer from './components/footer';
import Imprint from './components/imprint';
import Privacy from './components/privacy';
import Home from './components/home';
import Background from './components/background';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import scrollUp from './images/scrollUp.png';
import styled  from 'styled-components';

const MarginTop = styled.div`
    margin-top:50px;
`;

class App extends Component {
  render() {
    return (
      <div>
        <Background key="backgroundComponent" />
        <HashRouter>
          <div>
            <div id="main" className="container-fluid">
                <div id="content">
                  <NavBar key="navbarComponent" />
                  <MarginTop>
                    <Route exact={true} path="/" component={Home}/>
                    <Route exact={true} path="/imprint" component={Imprint}/>
                    <Route exact={true} path="/privacy" component={Privacy}/>
                  </MarginTop>
                </div>
            </div>
            <Footer key="footerComponent" />
          </div>
        </HashRouter>
        <ScrollToTop showUnder={160}>
          <img src={scrollUp} alt="" className="bg-light rounded-circle" />
        </ScrollToTop>
      </div>
    );
  }
}

export default App;

任何人都可以幫忙，是什么導致了這個錯誤？

Answer 1

幾個月后，我偶然發現了原因。 在我將項目克隆到另一台機器上並想啟動項目后， npm向我顯示了錯誤所在的位置。

問題是我用小寫寫了導入，但文件以大寫字母開頭。 這是一個例子。

import Background from './components/background';

需要更改為

import Background from './components/Background';

完成所有更正后，我能夠將項目上傳到 Heroku。 回想起來，這是完全合乎邏輯的。

Answer 2

我認為路徑名的大寫只需要與文件名的大寫相匹配......似乎Node可以原諒這個錯誤，但Heroku不是。 （組件名不一定要和文件名匹配）

謝謝，這幫助我在我的項目中找到了同樣的錯誤！