I'm a bit stumped. My local rails app works great with webpacker 4.2 and react, but when deploying to production gives me the wonderful can't find application in /app/public/packs/manifest.json
error.
Here's what I've tried:
4.2
Am I missing a build step or something in production that would be causing this? What is left to check?
Server error:
2019-12-03T15:18:19.022024+00:00 app[web.1]: I, [2019-12-03T15:18:19.021952 #30] INFO -- : [aa0374eb-bab1-40cc-b40b-6ae3d195e07d] Completed 500 Internal Server Error in 112ms (ActiveRecord: 30.4ms | Allocations: 21296)
2019-12-03T15:18:19.023103+00:00 app[web.1]: F, [2019-12-03T15:18:19.023029 #30] FATAL -- : [aa0374eb-bab1-40cc-b40b-6ae3d195e07d]
2019-12-03T15:18:19.023107+00:00 app[web.1]: [aa0374eb-bab1-40cc-b40b-6ae3d195e07d] ActionView::Template::Error (Webpacker can't find application in /app/public/packs/manifest.json. Possible causes:
2019-12-03T15:18:19.023109+00:00 app[web.1]: 1. You want to set webpacker.yml value of compile to true for your environment
2019-12-03T15:18:19.023111+00:00 app[web.1]: unless you are using the `webpack -w` or the webpack-dev-server.
2019-12-03T15:18:19.023114+00:00 app[web.1]: 2. webpack has not yet re-run to reflect updates.
2019-12-03T15:18:19.023116+00:00 app[web.1]: 3. You have misconfigured Webpacker's config/webpacker.yml file.
2019-12-03T15:18:19.023118+00:00 app[web.1]: 4. Your webpack configuration is not creating a manifest.
2019-12-03T15:18:19.023120+00:00 app[web.1]: Your manifest contains:
{
"application.js": "/packs/js/application-2a0e2c932678ebbf2ae7.js",
"application.js.map": "/packs/js/application-2a0e2c932678ebbf2ae7.js.map",
"entrypoints": {
"application": {
"js": [
"/packs/js/application-2a0e2c932678ebbf2ae7.js"
],
"js.map": [
"/packs/js/application-2a0e2c932678ebbf2ae7.js.map"
]
},
"server_rendering": {
"js": [
"/packs/js/server_rendering-eb794d024d4852e8ab55.js"
],
"js.map": [
"/packs/js/server_rendering-eb794d024d4852e8ab55.js.map"
]
}
},
"server_rendering.js": "/packs/js/server_rendering-eb794d024d4852e8ab55.js",
"server_rendering.js.map": "/packs/js/server_rendering-eb794d024d4852e8ab55.js.map"
}
...
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application' %>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab:700&display=swap" rel="stylesheet">
2019-12-03T15:18:19.023193+00:00 app[web.1]: [aa0374eb-bab1-40cc-b40b-6ae3d195e07d] app/views/layouts/application.html.erb:10
Webpacker.yml
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: false
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: ['app/assets']
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .jsx
- .vue
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
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
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for performance.
compile: true
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true
It looks like there's no application.css
in your manifest.json
which means you might not be importing any css from within your Webpack javascript files.
If that's all true, then you can fix the error in production by one of the following:
extract_css: false
to your production
block in config/webpacker.yml
(which would mimic your local environments)<%= stylesheet_pack_tag 'application' %>
from your application layout