Hosting on Heroku with Node and Webpack — Module not found, can't resolve './Navbar'

Question

EDIT: Turns out, Git is case-insensitive, and the boilerplate I built from had a navbar.js , which I renamed Navbar.js (because it's a React component). Fixed it globally in bash: git config core.ignorecase false (as seen here ).

---

Ok, so a very bare-bones version of this same page compiled and ran for me a couple weeks ago; then all I added was some pretty basic CSS and React, and Heroku threw a fit! I have finally gotten it to either deploy a blank page or run my build script (without finishing), but I can't get it to do both together, nor to actually load my two components.

Heroku throws this error:

webpack is watching the files…

       Hash: ab702c072913a23f1d64
       Version: webpack 4.16.4
       Time: 4912ms
       Built at: 03/09/2019 4:19:00 AM
                        Asset      Size  Chunks             Chunk Names
           ./public/bundle.js  1.72 MiB    main  [emitted]  main
       ./public/bundle.js.map  1.65 MiB    main  [emitted]  main
       Entrypoint main = ./public/bundle.js ./public/bundle.js.map
       [0] multi @babel/polyfill ./client/index.js 40 bytes {main} [built]
       [./client/app.js] 750 bytes {main} [built]
       [./client/history.js] 565 bytes {main} [built]
       [./client/index.js] 830 bytes {main} [built]
       [./client/routes.js] 3.57 KiB {main} [built]
       [./client/socket.js] 449 bytes {main} [built]
       [./client/store/index.js] 927 bytes {main} [built]
       [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {main} [built]
       [./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {main} [built]
       [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {main} [built]
       [1] ws (ignored) 15 bytes {main} [optional] [built]
           + 491 hidden modules

       ERROR in ./client/components/index.js
       Module not found: Error: Can't resolve './Navbar' in '/tmp/build_b232611899d2d986bee399a971bd84b4/client/components'
       @ ./client/components/index.js 21:37-56
       @ ./client/app.js
       @ ./client/index.js
       @ multi @babel/polyfill ./client/index.js

client/components/index.js only consists of:

export {default as Landing} from './Landing'
export {default as Navbar} from './Navbar'

client/app.js is also pretty bare bones:

import React from 'react'
import {Navbar, Landing} from './components'
import Routes from './routes'

const App = () => {
  return (
    <div>
      <Navbar />
      <Landing />
      <Routes />
    </div>
  )
}

export default App

client/index.js doesn't even directly touch the Navbar that it can't resolve:

import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import {Router} from 'react-router-dom'
import history from './history'
import store from './store'
import App from './app'

import './socket'

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  document.getElementById('app')
)

Navbar.js also seems plausibly relevant:

import React from 'react'
import {connect} from 'react-redux'

const Navbar = () => (
  <nav id="navbar">
    <p>MY FULL NAME</p>
  </nav>
)

export default connect(Navbar)

What else is useful? Relevant package.json scripts?

"start": "NODE_ENV='development' npm run start-server",
"build-client-watch": "webpack -w",
"start-server": "nodemon server -e html,js,scss --ignore public --ignore client",
"postinstall": "NODE_ENV='development' npm run build-client-watch"

I'm far past out of ideas. Anything? Thanks so much!

Answer 1

Your call on "./Navbar" directory path in app.js may be wrong. This issue happens because of directory mismatch itself. Just paste your whole directory path here to find the solution accurately?