Failed to compile: Cannot find file './containers/App/App' in './src'

Question

I have been having a hard time pushing a React.js app to Heroku because I keep getting a failed to build message with the following amplifying information.

Heroku Build Console:

-----> Build
       Running build

       > [email protected] build /tmp/build_2456efea678b82d24203cb2e2c7bcbd5
       > react-scripts build

       Creating an optimized production build...
       Failed to compile.

       ./src/index.js
       Cannot find file './containers/App/App' in './src'.

My index.js file:

import App from './containers/App/App'
import * as serviceWorker from './serviceWorker'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './reducers'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'

const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))

const router = (
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>
)

File Structure:

src
  -->containers
    -->App
      -->__snapshots__
      -->App.js
      -->App.scss
      -->App.test.js
  -->index.js

I have tried deleting node_modules and reinstalling them, I have tried clearing the build cache in heroku, I have tried specifying App.js in the relative path, I have tried specifying the node version in the yml and package.json files, The Build passes locally with npm run build, I have tried just passing in each component into the router's position and I have found that all of the components work but all of the containers do not (could this be a redux issue somehow?)

I am about out of ideas :/

Answer 1

You can start by clearing the cache and see if there are any files that have been renamed.

This will cache the entire directory:

git rm -r --cached .

Also, you have to add, commit and push the changes:

git add .
git commit -am 'Removing cached files'

Answer 2

Rename containers to Containers and components to Components

Answer 3

You might have changed the casing of the file names after you have commited to git. You can fix it by calling git mv path/app.js path/App.js. This explicitly changes the file name in git.