Heroku - Node.js - React App - 构建失败 - “找不到文件”答案

【问题标题】：Heroku - Node.js - React App - Build failed - "Cannot find file"Heroku - Node.js - React App - 构建失败 - “找不到文件”
【发布时间】：2020-03-06 11:00:03
【问题描述】：

我是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 帖子，但没有成功：

During Heroku Post Build, Cannot find file

heroku deployment error npm ERR! code 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;

任何人都可以帮忙，是什么导致了这个错误？

【问题讨论】：

我知道你说过你检查了文件名的大小写敏感度，但为了确定，大小写可能从一个 heroku push 更改为另一个？
对不起，我其实不知道你到底是什么意思？我检查了关于区分大小写的拼写。我没有将应用程序从一个 heroku 推送到另一个。目前我在 heroku 中只有一个应用程序。
dns_nx 他的意思是，如果您将文件夹名称从 signIn 更改为 SignIn，例如，Heroku 将崩溃，这只是昨天发生在我身上。你知道@ChaimFriedman 的任何解决方案吗？

标签： node.js reactjs heroku

【解决方案1】：

几个月后，我偶然发现了原因。在我将项目克隆到另一台机器上并想启动项目后，npm 向我显示了错误所在的位置。

问题是我用小写写了导入，但文件以大写字母开头。这是一个例子。

import Background from './components/background';

需要改成

import Background from './components/Background';

完成所有更正后，我可以将项目上传到 Heroku。回想起来，这是完全合乎逻辑的。

【讨论】：

【解决方案2】：

我认为路径名的大写只需要与文件名的大写相匹配......似乎 Node 可以原谅这个错误，但 Heroku 不能。（组件名不一定要和文件名匹配）

谢谢，这帮助我在我的项目中找到了同样的错误！

【讨论】：