react-rails
react-rails copied to clipboard
Cannot find component in Production
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)
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.
Closing the issue based on the above solution.