EOFError when loading webpack javascript in Rails

Question

I have a file app/javascript/packs/application.js in my Rails 6 project. When I load the local dev version of the site, it attempts to retrieve that via http://localhost:4000/packs/js/application-ed3ae63cdf581cdb86b0.js (I'm running on a custom port to avoid conflicts with another app), but the request for the JS file fails with a 500:

Puma caught this error: end of file reached (EOFError)
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/protocol.rb:225:in `rbuf_fill'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/protocol.rb:191:in `readuntil'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/protocol.rb:201:in `readline'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/http/response.rb:40:in `read_status_line'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/2.6.0/net/http/response.rb:29:in `read_new'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/gems/rack-proxy-0.6.5/lib/net_http_hacked.rb:53:in `begin_request_hacked'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/gems/rack-proxy-0.6.5/lib/rack/http_streaming_response.rb:60:in `response'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/gems/rack-proxy-0.6.5/lib/rack/http_streaming_response.rb:29:in `headers'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/gems/rack-proxy-0.6.5/lib/rack/proxy.rb:120:in `perform_request'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/gems/webpacker-4.3.0/lib/webpacker/dev_server_proxy.rb:21:in `perform_request'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/gems/rack-proxy-0.6.5/lib/rack/proxy.rb:57:in `call'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/gems/railties-6.0.3.3/lib/rails/engine.rb:527:in `call'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/gems/puma-4.3.6/lib/puma/configuration.rb:228:in `call'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/gems/puma-4.3.6/lib/puma/server.rb:713:in `handle_request'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/gems/puma-4.3.6/lib/puma/server.rb:472:in `process_client'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/gems/puma-4.3.6/lib/puma/server.rb:328:in `block in run'
/Users/sam/.rbenv/versions/2.6.6/lib/ruby/gems/2.6.0/gems/puma-4.3.6/lib/puma/thread_pool.rb:134:in `block in spawn_thread'

This file doesn't exist locally:

$ ls public/packs/js/application-ed3ae63cdf581cdb86b0.js
ls: public/packs/js/application-ed3ae63cdf581cdb86b0.js: No such file or directory

but a version with another fingerprint does (and is non-empty):

$ ls -alh public/packs/js/application-*
-rw-r--r--  1 sam  staff   188K 24 Feb 17:58 public/packs/js/application-fdef50bf044896f1dc71.js
-rw-r--r--  1 sam  staff   212K 24 Feb 17:58 public/packs/js/application-fdef50bf044896f1dc71.js.map

I can't get my site to request the right files. Following this, I've tried

rake assets:clean
rake assets:precompile
touch tmp/restart.txt

but to no avail. I've also tried a private browser window, clearing browser cache and a different browser.

I'm using bin/server rather than bin/webpacker-dev-server and haven't changed my webpacker.yml (it was auto-created on init and then auto-updated when I installed React), but in case it helps, it looks like this:

# 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: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # 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
    - .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
    pretty: 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: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

What am I missing? Thanks in advance!

Answer 1

I encountered a variant of this problem on another occasion (same error, but files of the right name were in public/packs/js) and managed to resolve it by no longer running my Rails app on a custom port.

Furthermore, when I then stopped that server and re-ran it with the custom port re-applied, the assets then loaded correctly in that context too.

Answer 2

There are several things that come to mind by seeing that you are not using the dev server, it's very likely to have an old version of your assets in public/packs.

Try removing that packs folder and run bin/server