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!

user10269224 · Answer 1 · 2019-03-09T06:06:56.957

0

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?

edited Mar 09 '19 at 06:06

answered Mar 09 '19 at 05:59

user10269224

73
10

Thanks, I did try this before posting. Same result. – Claire Gilligan Mar 09 '19 at 20:58
Found it! Git is case-insensitive by default, so it was looking for './Navbar' while git had saved './navbar' ages ago, oyy. https://stackoverflow.com/questions/17683458/how-do-i-commit-case-sensitive-only-filename-changes-in-git – Claire Gilligan Mar 12 '19 at 01:32

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

1 Answers1