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 Post Build 期间，找不到文件

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。回想起来，这是完全合乎逻辑的。