CODEWITHSUNDEEP
reactjsherokudeploymentmodule
Jason Harder
Jason Harder

Reputation: 441

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

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)

FILESTRUCTURE

Upvotes: 6

Views: 9325

Answers (5)

Cesare Polonara
Cesare Polonara

Reputation: 3860

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

Upvotes: 0

Nehal Ahmed
Nehal Ahmed

Reputation: 49

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!

Upvotes: 2

Hoang Minh
Hoang Minh

Reputation: 1230

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

Upvotes: 0

Agent
Agent

Reputation: 1395

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

Upvotes: 10

Rakesh Makluri
Rakesh Makluri

Reputation: 647

I found 2 problems with your code:

  1. Import path is case sensitive(for some environments). And you are using 'Components' instead of 'components'

  2. Import of 'App' in index.js is wrong. Use following

    import App from './App';

Upvotes: 3

Related Questions