Cannot find file on trying to deploy to heroku (works locally) - reactjs

Question

I am trying to deploy my app to Heroku, it works in local but no luck online. I deleted and reinstalled node modules.
I had another error quite related to this (file not found same names etc) I changed the relative paths thinking that would fix the issue but I am getting nothing to come out of it
The error is:
Cannot find file './Components/SearchBar/SearchBar'
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import SearchBar from './Components/SearchBar/SearchBar'
import BusinessList from './Components/BusinessList/BusinessList'
import Business from './Components/Business/Business'
import Yelp from './Components/Util/Yelp'
I expected to not pull an error for something so simple, I've poured over the file and folder names and it just is not making sense.
PS I think it's probably unconnected I have const yelpApiKey=process.env.yelpApiKey for my heroku to connect to my API key (typed inside my account)

Answer 1

Thank you #Jason for asking this question and #Rakesh for answering.
I deployed create-react-app project on Heroku then I encountered a similar error where failed to build my project. the error was routes.js failed to import signup.js
Heroku log
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=false
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): 10.16.3
engines.npm (package.json): unspecified (use default)
Resolving node version 10.16.3...
Downloading and installing node 10.16.3...
Using default npm version: 6.9.0
-----> Restoring cache
Caching has been disabled because NODE_MODULES_CACHE=false
-----> Installing dependencies
Installing node modules (package.json + package-lock)
> core-js#2.6.9 postinstall /tmp/build_5d506b6dfc93b7f4b6575e02cc682130/node_modules/babel-runtime/node_modules/core-js
> node scripts/postinstall || echo "ignore"
> core-js#3.2.1 postinstall /tmp/build_5d506b6dfc93b7f4b6575e02cc682130/node_modules/core-js
> node scripts/postinstall || echo "ignore"
added 1507 packages from 719 contributors and audited 905071 packages in 35.746s
found 0 vulnerabilities
-----> Build
Running build
> chat-app#0.1.0 build /tmp/build_5d506b6dfc93b7f4b6575e02cc682130
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/routes.js // my beautiful error here
Cannot find file './Components/User/signup/signup.js' in './src'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chat-app#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the chat-app#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.ynm0W/_logs/2019-09-30T15_24_32_571Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
solution
Heroku deploy projects on Linux servers, it means it is case sensitive if you make mistake the build will fail. I advise sticking with lowercase when naming files and directories.
my project structure
|root
|src
| componets
| user
| signup
|routes
|index.js
Alternatively,
After I correct mistakes, I still had the same error. so why?
I did not notice Git does not push the change. When you only rename the directory and even if you do git add, git commit and git push Git sometimes does not consider the changes. I advise after change go to the website to verify.
Lastly,
when deploying to Heroku please deploy only the base branch. for Example Master or develop. I realized every time I deployed my feature branch, Heroku automatic detect my base branch which was develop.

Answer 2

I found 2 problems with your code:
Import path is case sensitive(for some environments). And you are using 'Components' instead of 'components'
Import of 'App' in index.js is wrong. Use following
import App from './App';

Answer 3

In my case i renamed my file locally but when i pushed it on github it didn't reflected there. so i deleted that file and made new file with same content and it worked!

Answer 4

I tried all the suggestions above but none are working for me. Eventually, what I did was deleting the file that was complaining missing by heroku, and replaced it with a dummy component. After that, checked in my changes to heroku. Everything should be deployed successfully now.
Finally, I can swapped back my old dummy component with my original component and checked into heroku again and hallelujah, it worked !!!!
Hopefully that my workaround could save someone time :)
Thanks

Answer 5

This problem on Heroku is usually due to the fact that you renamed a component, like for example MyComponent into Mycomponent, and both git cache and heroku build cache may give that problem. The solution is this: Failed to compile: Cannot find file './containers/App/App' in './src' and clean the heroku build cache to to be safe:
https://help.heroku.com/18PI5RSY/how-do-i-clear-the-build-cache