Heroku - Node.js - React App - Build failed - "Cannot find file"

Question

I'm a newbie with heroku. I have built a test app with react and loaded it to heroku. The react app was old with many outdated packages. I uploaded it to heroku. That worked fine.

After that I made several major local changes (upgrading the packages, changing the app itself, etc.). Then I wanted it to upload to heroku again with the command

git push heroku master

Unfortunately, then always this error message appears:

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

Locally I can build the app with the command

npm run build

without error. I also checked these stackoverflow post, but without success:

During Heroku Post Build, Cannot find file

heroku deployment error npm ERR! code ELIFECYCLE errno1

I checked

spelling (case-sensitivity)
cleared the build cache
upgraded node.js and npm to current release (same as mentioned in command git push heroku master

Actually first, the error mentioned a different file (home.js). I copied the file to the end, then it mentioned background.js as problematic file.

Here is the complete log:

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:        > [email protected] postinstall /tmp/build_bec5778160dce30fbe2726b3a5e7fec1/node_modules/babel-runtime/node_modules/core-js
remote:        > node postinstall || echo "ignore"
remote:
remote:
remote:        > [email protected] postinstall /tmp/build_bec5778160dce30fbe2726b3a5e7fec1/node_modules/core-js
remote:        > node scripts/postinstall || echo "ignore"
remote:
remote:
remote:        > [email protected] 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:        > [email protected] 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! [email protected] build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the [email protected] 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'

Here is the file structure:

And here is the code of 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;

Can anybody help, what it causing this error?

I know you said you checked the case sensitivity of the filenames, but just to be sure, it it possible the casing changed from one heroku push to another? — Chaim Friedman
– Chaim Friedman, Commented Nov 10, 2019 at 15:02
Sorry, I actually don't know what exactly you mean? I checked the spelling regarding case-sensitivity. I did not push the app from one heroku to another. I have only one app in heroku at the moment. — dns_nx
– dns_nx, Commented Nov 10, 2019 at 15:08
dns_nx he means that if you changed a folder name from signIn to SignIn, for example, the Heroku will crash, it just happen to me yesterday. Do you know any solution for that @ChaimFriedman ? — Guilherme Felipe Reis
– Guilherme Felipe Reis, Commented Jan 3, 2020 at 10:12

halfer · Accepted Answer · 2020-11-29 13:18:23Z

5

After a few months, I stumbled upon the reason rather accidentally. After I cloned the project on another machine and wanted to start the project, npm showed me where the errors was located.

The problem was that I wrote the imports in lowercase, but the files start with capital letters. Here is an example.

import Background from './components/background';

need to change to

import Background from './components/Background';

After all corrections have been made, I was able to upload the project to Heroku. In retrospect this is completely logical.

edited Nov 29, 2020 at 13:18

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered May 2, 2020 at 17:55

dns_nx

3,9556 gold badges47 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lee · Accepted Answer · 2020-06-15 17:16:16Z

1

I think the capitalization of the path name just needs to match that of the filename... seems Node is forgiving of that mistake but Heroku is not. (The component name doesn't necessarily need to match the filename)

Thanks, this helped me find the same my mistake in my project!

answered Jun 15, 2020 at 17:16

Lee

414 bronze badges

Collectives™ on Stack Overflow

Heroku - Node.js - React App - Build failed - "Cannot find file"

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related