Ever-present RoutingErrors for javascript/workbox/ files in Rails 5 + React app

[randall-coding]

Specs:

• Rails 5.2
• Ruby 2.5.1
• Yarn 1.91.1
• React-Rails 2.6.0
• Postgresql 10
• Ubuntu 18.04
• Webpacker 4.0.7
• Websocket-driver 0.7.1

Issue: Getting these ever present error messages destroying my logs with backtraces. They happen after I set up a rails 5 app with react. The errors are all looking for routes for javascript/workbox/ files once I start the server with rails s

Started GET "/service-worker.js" for 127.0.0.1 at 2019-11-14 09:28:15 -0700
Started GET "/javascripts/workbox/workbox-sw.js" for 127.0.0.1 at 2019-11-14 09:28:15 -0700
Started GET "/javascripts/workbox/workbox-expiration.prod.js" for 127.0.0.1 at 2019-11-14 09:28:15 -0700
Started GET "/javascripts/workbox/workbox-core.prod.js" for 127.0.0.1 at 2019-11-14 09:28:15 -0700
Started GET "/javascripts/workbox/workbox-strategies.prod.js" for 127.0.0.1 at 2019-11-14 09:28:15 -0700
ActionController::RoutingError (No route matches [GET] "/service-worker.js"):

Notice the errors begin on the last line and will continue from there for each of those GET requests. Followed by a stacktrace for each like this one

actionpack (5.2.3) lib/action_dispatch/middleware/debug_exceptions.rb:65:in call' web-console (3.7.0) lib/web_console/middleware.rb:135:in call_app' web-console (3.7.0) lib/web_console/middleware.rb:30:in block in call' web-console (3.7.0) lib/web_console/middleware.rb:20:in catch' web-console (3.7.0) lib/web_console/middleware.rb:20:in call' actionpack (5.2.3) lib/action_dispatch/middleware/show_exceptions.rb:33:in call' railties (5.2.3) lib/rails/rack/logger.rb:38:in call_app' railties (5.2.3) lib/rails/rack/logger.rb:26:in block in call' activesupport (5.2.3) lib/active_support/tagged_logging.rb:71:in block in tagged' activesupport (5.2.3) lib/active_support/tagged_logging.rb:28:in tagged' activesupport (5.2.3) lib/active_support/tagged_logging.rb:71:in tagged' railties (5.2.3) lib/rails/rack/logger.rb:26:in call' sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:13:in call' actionpack (5.2.3) lib/action_dispatch/middleware/remote_ip.rb:81:in call' actionpack (5.2.3) lib/action_dispatch/middleware/request_id.rb:27:in call' rack (2.0.7) lib/rack/method_override.rb:22:in call' rack (2.0.7) lib/rack/runtime.rb:22:in call' activesupport (5.2.3) lib/active_support/cache/strategy/local_cache_middleware.rb:29:in call' actionpack (5.2.3) lib/action_dispatch/middleware/executor.rb:14:in call' actionpack (5.2.3) lib/action_dispatch/middleware/static.rb:127:in call' rack (2.0.7) lib/rack/sendfile.rb:111:in call' webpacker (4.0.7) lib/webpacker/dev_server_proxy.rb:29:in perform_request' rack-proxy (0.6.5) lib/rack/proxy.rb:57:in call' railties (5.2.3) lib/rails/engine.rb:524:in call' puma (3.12.1) lib/puma/configuration.rb:227:in call' puma (3.12.1) lib/puma/server.rb:660:in handle_request' puma (3.12.1) lib/puma/server.rb:474:in process_client' puma (3.12.1) lib/puma/server.rb:334:in block in run' puma (3.12.1) lib/puma/thread_pool.rb:135:in `block in spawn_thread'

What I did: I followed instructions from multiple sources (Here's 1 and another) telling me to do basically the same thing. I ran rails new app --database=postgresql --webpack=react which runs normally. Then I add the gem react-rails to my gemfile and bundle install again. I next run rails generate react:install and everything seems fine except for a few warnings. Here are some of the warnings, I don't know if these are causing the issue or not.

warning " > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0". warning "webpack-dev-server > [email protected]" has unmet peer dependency "webpack@^4.0.0".

Not sure if those warnings matter or if there is another reason that my app isn't setting up Workbox properly.

React itself is working. The default Hello world rails app works fine. It is just the constant failed GET requests to Workbox files that is causing me grieve.

What I've tried to fix it I've tried re-creating new react apps using the instructions I showed above but I run into the same problem.
I've also looked through stackoverflow questions for anyone else with a similar issue.

[jmcbri]

Did you ever figure this out? I am getting a similar set of errors, and I'm not using React!

[randall-coding]

I found a way to stop it for a single app. I looked up a way to create a blank service-worker.js file and made it available to my server.

Unfortunately I cannot say I got to the bottom of this. But here is what my service-worker.js file looks like

// A simple, no-op service worker that takes immediate control.

self.addEventListener('install', () => {
  // Skip over the "waiting" lifecycle state, to ensure that our
  // new service worker is activated immediately, even if there's
  // another tab open controlled by our older service worker code.
  self.skipWaiting();
});

/*
self.addEventListener('activate', () => {
  // Optional: Get a list of all the current open windows/tabs under
  // our service worker's control, and force them to reload.
  // This can "unbreak" any open windows/tabs as soon as the new
  // service worker activates, rather than users having to manually reload.
  self.clients.matchAll({type: 'window'}).then(windowClients => {
    windowClients.forEach(windowClient => {
      windowClient.navigate(windowClient.url);
    });
  });
});
*/

I added it into the public folder, that stops the messages for me.

[jmcbri]

Thanks for the quick response! I still don't know what the issue was for me, but based on some searches that said that the browser might actually be restarting the service workers (or trying) based on another app, I simply switched the rails development server from listening on part 3000 to listening on port 4000 ( rails s -p 4000, and hit that url: localhost:4000.) That fixed that (sort of).

[alkesh26]

Closing the issue based on the above conversations.