Cannot find component in Production

[stoplion]

Steps to reproduce

• push to Heroku (compiles assets, etc..)

Actual behavior

Deploying to production breaks React.

System configuration

Webpacker: 4.x Rails: 6.0 Rect_UJS: 2.6.3

Snaphot of dir

nav
├── DesktopNav.jsx
├── EmbedNav.jsx
├── MobileNav.jsx
├── NavComponent.jsx
├── NavMenu.jsx
├── elements.jsx
├── search
│   ├── AutoCompleteList.jsx
│   └── SearchBox.jsx
└── sections
    ├── DeviseLinks.jsx
    ├── EditSection.jsx
    ├── Logo.jsx
    ├── NavLink.jsx
    └── UserSection.jsx

Webpacker Config

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: client
  source_entry_path: bundles
  public_output_path: assets/bundles # outputs to => public/assets/bundles
  cache_path: tmp/cache/webpacker
  cache_manifest: false
  extract_css: true

  extensions:
    - .jsx
    - .js
    - .sass
    - .scss
    - .worker
    - .worker.js
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
    - .eot
    - .svg
    - .ttf
    - .woff

development:
  <<: *default
  # true will make it compile on request if there have been changes
  # we use webpack-dev-server instead which compiles when a change is detected
  compile: false

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    inline: true # Inline should be set to true if using HMR
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/

test:
  <<: *default
  compile: true
  public_output_path: bundles-test # Compile test bundles to a separate directory

production:
  <<: *default
  # Production depends on precompilation of packs prior to booting for performance.
  compile: false
  # Cache manifest.json for performance
  cache_manifest: true
  # Extract and emit a css file

Errors

Error: Cannot find module './nav/NavMenu'
    at i (.*$:93)
    at o (.*$:88)
    at fromRequireContext.js:13
    at Object.getConstructor (fromRequireContextWithGlobalFallback.js:15)
    at Object.mountComponents (index.js:89)
    at HTMLDocument.handleMount (index.js:149)
    at Object.a.dispatch (turbolinks.js:75)
    at t.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at t.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872
(anonymous) @ application-9f855c25f1b4207dc1b1.js:2
mountComponents @ application-9f855c25f1b4207dc1b1.js:2
handleMount @ application-9f855c25f1b4207dc1b1.js:2
a.dispatch @ application-9f855c25f1b4207dc1b1.js:2
t.notifyApplicationAfterPageLoad @ application-9f855c25f1b4207dc1b1.js:2
t.pageLoaded @ application-9f855c25f1b4207dc1b1.js:2
(anonymous) @ application-9f855c25f1b4207dc1b1.js:2
fromRequireContextWithGlobalFallback.js:22 ReferenceError: nav is not defined
    at eval (eval at module.exports (fromGlobal.js:12), <anonymous>:1:1)
    at module.exports (fromGlobal.js:12)
    at Object.getConstructor (fromRequireContextWithGlobalFallback.js:19)
    at Object.mountComponents (index.js:89)
    at HTMLDocument.handleMount (index.js:149)
    at Object.a.dispatch (turbolinks.js:75)
    at t.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at t.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

index.js:103 Uncaught Error: Cannot find component: 'nav/NavMenu'. Make sure your component is available to render.
    at Object.mountComponents (index.js:103)
    at HTMLDocument.handleMount (index.js:149)
    at Object.a.dispatch (turbolinks.js:75)
    at t.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at t.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

Bundle file

import 'babel-polyfill';
import './style.scss';

require('dotenv').config();

const ReactRailsUJS = require('react_ujs');
import Turbolinks from 'turbolinks';

Turbolinks.start();
window.Turbolinks = Turbolinks;

require('@rails/ujs').start();

const componentRequireContext = require.context('../javascript/components', true);

ReactRailsUJS.detectEvents();
ReactRailsUJS.useContext(componentRequireContext);
delete window.Turbolinks;

In the View

= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

• /nav/NavMenu does exist but does not show up..
• The output appears to be missing the code for React (only 155 B)

[stoplion]

I've figured out the issue..

When pushing to Heroku, the OS (Linux) is case sensitive to file paths.

On my computer I have: /nav/DesktopNav

But when I try find the component.. componentRequireContext('nav/NavMenu')

It errors and I can see it is caching its file path with uppercase

var map = {
	"./Nav/DesktopNav": 144,
	"./Nav/DesktopNav.jsx": 144,
	"./Nav/EmbedNav": 268,
	"./Nav/EmbedNav.jsx": 268,
	"./Nav/MobileNav": 147,
	"./Nav/MobileNav.jsx": 147,
	"./Nav/NavComponent": 148,
	.....

Nav is uppercase. I've changed this a couple months ago. So it appears there is some kind of caching issue going on.

[alkesh26]

Closing the issue based on the above solution.