Rails: Webpacker 4.2 can't find application in /app/public/packs/manifest.json heroku

Question

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:

• Tried adding/removing turbo link details for javascript pack tag.
• Removed javascript include tag (not sure if this helps or not)
• Ensure I'm on the latest webpacker 4.2
• ran rake assets:clean && rake assets:precompile manually on heroku just to ensure things are getting built.

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

Jodi

I would expect you want to set compile: false in production meaing that you should also run rails assets:precompile as part of the deploy process. – Astonishment

Yeah had it false originally, just wanted to try it out to see if it helped, but didn't do anything. isn't rails assets:precompile automatically ran with webpacker? similar to other assets? – Jodi

Just updated compile to false and ran rails assets:precompile, no go :( – Jodi

Answer 1

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:

• Quick (temporary) fix: Add extract_css: false to your production block in config/webpacker.yml (which would mimic your local environments)
• If you don't want to compile css with Webpacker: Remove <%= stylesheet_pack_tag 'application' %> from your application layout
• If you want to compile some css with Webpacker: Import at least one css file from your Webpack javascript

Astonishment

oh Snap! looks like that was the issue! Making extract_css false, fixed it. Not sure how i missed that, many thanks! That said, i'd love to have it set to true in production so i have the css in one file, why wouldn't webpacker be generating an application css file? – Jodi

If you're not importing any css then there's nothing to export. I think the ideal fix is to keep extract_css: true and remove the stylesheet_pack_tag until you're ready to process css with Webpack, at which point, you'd add the stylesheet_pack_tag back. – Astonishment

Oddly enough in my case i'm importing scss files in several of my react components I'm using. Which is why I was confused nothing was being generated. Though I wonder if its because of how the scss is being handled by webpack. Need to research that more. – Jodi

Sounds like a separate issue – Astonishment

Why is adding extract_css: false only a temporary fix? – Tragic

In production, it's typically preferable to extract css into a separate file. Otherwise, you may see a flash of unstyled content (FOUC) because you'd be relying on your JavaScript to inject the CSS. – Astonishment

@Astonishment Thank you for your time answering this :) I'm sorry, currently I'm facing this issue with Rails 6.0.3.4 & its erroring for the line <%= javascript_pack_tag 'application' %> in application.html.erb. I don't find the stylesheet_pack_tag be generated any longer as part of new Rails 6.0.3.4 apps. I've also tried option 1 with setting extract_css: false but that didn't do the trick for me unfortunately. I also tried the last option to import at least one css file in my application.js with the command like import '../stylesheets/application' but this din't fix it. Can u pls help? – Blocked

Answer 2

If you are using Rails 6+ with webpacker then due to the latest rails 6 update the both javascript and css files are moved under app/javascript instead of app/assets.

app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  └── src:
  │   └── application.css
  └── images:
      └── logo.svg

But if you have upgraded from older version to new version but still want to compile CSS from app/assets/stylesheets folder then follow the below tweaks:

1. update the below in config/webpacker.yml for webpack to include app/assets in the resolved path.

// config/webpacker.yml

resolved_paths: ['app/assets']

2. copy below line to app/javascript/packs/application.js.

// app/javascript/packs/application.js

import 'stylesheets/application'

This should fix your CSS compilation issue when you run bin/webpack-dev-server.

Gelderland

Answer 3

I was getting the same error on my local instance also.

After trying out a lot of workarounds, the following steps worked for me

bundle exec rails webpacker:install

Though this command was failing with the following error

gyp: No Xcode or CLT version detected! gyp ERR! configure error gyp ERR! stack Error: gyp failed with exit code: 1 gyp ERR! stack at ChildProcess.onCpExit (/Users//Documents/Ruby/udemy/test/alpha-blog/alpha-blog/node_modules/node-gyp/lib/configure.js:345:16) gyp ERR! stack at ChildProcess.emit (node:events:376:20) gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:284:12) gyp ERR! System Darwin 19.6.0 gyp ERR! command "/usr/local/Cellar/node/15.5.0/bin/node" "/Users//Documents/Ruby/udemy/test/alpha-blog/alpha-blog/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" gyp ERR! cwd /Users/***/Documents/Ruby/udemy/test/alpha-blog/alpha-blog/node_modules/node-sass gyp ERR! node -v v15.5.0 gyp ERR! node-gyp -v v3.8.0 gyp ERR! not ok

To correct the issue I used the following stack overflow answer (on macOS catalina)

https://mcmap.net/q/152954/-npm-install-with-error-gyp-failed-with-exit-code-1

Then I ran the following command

bundle exec rails webpacker:install

After doing above steps I didn't get the error again. Please verify if this works for you as you are facing the issue on Heroku deployment.

Felic

The solution to docker build with rails and webpacker. Thanx! – Carlinecarling

Answer 4

I had this same issue after upgrading a Rails application from version Rails 5 to Rails 6.

I tried the solutions below but none worked for me:

Reinstalling webpacker

bundle exec rails webpacker:install

Recompiling assets both locally and in production

rails assets:precompile

rails assets:precompile RAILS_ENV=production

Deleting my node modules and my public/assets files and running yarn install afresh:

rm -rf node_modules
rails assets:clobber
rails assets:precompile

I even pushed the compiled production assets to git and deployed to production

rails assets:precompile RAILS_ENV=production
git add public/assets -f
git commit -m "Vendor compiled assets"

Here's what worked for me:

I opened the config/environments/production.rb file and added the config below to it:

# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false

Now when I pushed again to Heroku, everything worked fine.

So what this command do - without that command in the Rails 6 application it is assumed that config.assets.compile is set to true or that config.assets.compile defaults to true. So what happens is this every request for a file in /assets is passed to Sprockets. On the first request for each and every asset it is compiled and cached in whatever Rails is using for cache (usually the filesystem). On subsequent requests, Sprockets receives the request and has to look up the fingerprinted filename, check that the file (image) or files(css and js) that make up the asset were not modified, and then if there is a cached version serve that. This setting is known to cause other run-time instabilities and is generally not recommended

Resources: Compile Set to True in Production

That's all.

I hope this helps

Mattins

Answer 5

The accepted solution above resolves the issue for most but if like me you continued to have problems after following every instruction and every solution. The below might help you.

After going down a rabbit hole of errors, I found the following works.

In my experience, its to do with webpacker and your nvm installation. To try the solution, start by reverting any other actions you did to debug the issue. You need to ensure that you are running the latest webpacker version.

I would then run:

    rails webpacker:compile 

in your terminal.

If it compiles without a node warning then all good. if it gives you a warning about your node version, and or it does not compile, install the latest LTS node version. mine is 16.13.1. for ubuntu. . This is important. The latest version of node is not necessarily the latest lts version. You need to install in your home directory. Run:

    nvm install --lts
    nvm use --lts

You may want to set this as your default eg. :

    nvm alias default 16.13.1

Also ensure that your application layout has:

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

Once that is done run webpacker compile again as above.

if you have any issues after this you can also try adding below in your config / initializer / assets.rb file:

    Rails.application.config.assets.precompile += %w(application.js)

Fanaticize

Answer 6

I encountered the same error and attempted all the suggested solutions, but the issue persisted. Finally, I realized that my node version was v16.14.0, so I switched to v14.18.3, and that resolved the problem for me. Hopefully, this will be helpful to someone else in the future.

Koran