Why does heroku fail my build and says it cannot find a file when it works locally?

Question

Here is what happens when pushing to heroku:

remote: -----> Build
remote:        Running build
remote:        
remote:        > react-portfolio@0.1.0 build /tmp/build_960f0e66a47347274538f4490dbb400d
remote:        > react-scripts build
remote:
remote:        Creating an optimized production build...
remote:        Failed to compile.
remote:
remote:        ./src/App.js
remote:        Cannot find file './pages/About' in './src'.
remote:
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! react-portfolio@0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the react-portfolio@0.1.0 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.7v0ee/_logs/2020-05-12T22_42_31_150Z-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 boiling-island-73749.
remote:
To https://git.heroku.com/boiling-island-73749.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/boiling-island-73749.git'

It says the build is failing because it cannot find About.js. HOWEVER, I've been opening my app locally and About.js is showing just fine. I see no reason why it cannot find this file and failing the build. I also keep getting different messages from heroku that it either cannot specify the node version, or it says "Dangerous semver range (>) in engines.node." Currently, my package.json says this:

 "engines": {
    "node": "12.14.x",
    "npm": "6.x"
  }

Does anyone know why my build keeps failing and it refuses to push to heroku?

EDIT: As I'm troubleshooting this further, I'm finding that the problems are all the components in my pages directory. When I remove the import for About.js, it gives an error for the next component inside that directory.

Removing all the imports for the components that are sitting in /pages in App.js allows the App to successfully deploy. When I try to add these components back in, the error runs again.

I want to reiterate that the app runs fine locally. Does anyone know why heroku acts like these files don't exist? What doesn't it like about it?

For reference, my App.js looks like this:

import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Header from "./components/Header";
import PageTitle from "./components/PageTitle";
import Footer from "./components/Footer";
import About from "./pages/About";
import Portfolio from "./pages/Portfolio";
import Contact from "./pages/Contact";
import "./App.css";

function App() {

  return (
    <Router>
      <Header />
      <PageTitle>
        <Route exact path="/" component={About} />
        <Route exact path="/portfolio" component={Portfolio} />
        <Route exact path="/contact" component={Contact} />
      </PageTitle>
      <Footer />
    </Router >
  )
}

export default App;

Answer 1

I believe this has to do with how default export works. Since you're only exporting one function, you can rename the file index.js and then you can import the component like this import * as About from../components/About . Checkout more on importing and exporting:

https://www.sitepoint.com/understanding-module-exports-exports-node-js/