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

时间：2019-11-10 14:50:12

标签： node.js reactjs heroku

我是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'

这是文件结构：

enter image description here

这是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;

有人可以帮忙，什么原因导致此错误？

2 个答案:

答案 0 :(得分：1)

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

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

import Background from './components/background';

需要更改为

import Background from './components/Background';

在进行所有更正之后，我能够将项目上传到Heroku。回想起来，这是完全合乎逻辑的。

答案 1 :(得分：0)

我认为路径名的大小写只需要与文件名的大小写匹配……似乎Node宽恕了这个错误，但Heroku却没有。 （组件名称不一定需要与文件名匹配）

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

相关问题
最新问题