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

Solution 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

Solution 2

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://stackoverflow.com/a/60860951/5876113

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.

Solution 3

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.

Solution 4

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)

View more solutions