support@lune.dev

Want to use over 200+ MCP servers inside your coding tools like Cursor?

Asked 1 month ago by JovianRanger232

How can I resolve missing asset routes and jquery-ui file errors after upgrading to Ruby 3.3.6 and Rails 8.0.0?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

After upgrading our legacy app from Ruby 2.0.0 to Ruby 3.3.6 and Rails 8.0.0, our CSS, JavaScript, and image assets no longer load properly. I followed several upgrade steps, including creating the manifest file and updating asset references, but issues persist.

First, I created the manifest file at app/assets/config/manifest.js with the following content:

JAVASCRIPT
//= link_tree ../images
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css

(I updated the above after my original post.)

Next, I replaced the gem "turbolinks" with "turbo-rails" and modified the application.html.rb head section as follows:

ERB
<head>
    <title>Numbe Accounting</title>
    <%= stylesheet_link_tag    :application, media: 'all', "data-turbo-track": "reload", defer: true %>
    <%= javascript_include_tag :application, "data-turbo-track": "reload", defer: true %>
    <%= csrf_meta_tags %>
</head>

I also updated the data attribute from data-turbolinks.track to data-turbo-track. Although the server starts and the app loads, none of the .css, .js, or image files are being served.

The production.log shows errors such as:

BASH
ActionController::RoutingError (No route matches [GET] "/stylesheets/application.css"):
  ...
ActionController::RoutingError (No route matches [GET] "/javascripts/application.js"):

I then added sprockets to the project, but the logs still show similar errors:

BASH
I, [2025-01-24T18:34:27.724264 #118440]  INFO -- : Started GET "/stylesheets/application.css" ...
ActionController::RoutingError (No route matches [GET] "/stylesheets/application.css"):

UPDATE 2

The structure of the files in my app/assets tree is:

BASH
# tree app/assets
app/assets
├── config
│   └── manifest.js
├── images
│   ├── abellard_logo.jpg
│   ├── abellard_logo.png
│   ├── abellard_SS_logo.png
│   ├── false.png
│   ├── numbe_accounting.jpg
│   ├── numbe_accounting_large.jpg
│   ├── tickmark.jpeg
│   ├── tickmark.png
│   ├── true.png
│   ├── x.png
│   ├── X.png
│   ├── y.png
│   └── Y.png
├── javascripts
│   ├── application.js
│   ├── journal_types.js.coffee
│   ├── license_journal_types.js.coffee
│   └── reports.js.coffee
└── stylesheets
    ├── application.css
    ├── normalize.css
    ├── reports.css.scss
    ├── style.css
    ├── tweaks.css
    └── zcaffolds.css.scss

The content of stylesheets/application.css is:

CSS
/*
 *= require_tree .
 *= require_self
 *= require jquery.ui.tabs
 *= require jquery.ui.button
 *= require jquery.ui.datepicker
 * require jquery.ui.accordion
*/

When running in development, I get a Sprockets::FileNotFound error indicating it couldn't find the file 'jquery.ui.tabs' with type 'text/css'.

UPDATE 3

The rails console yields:

BASH
$ rails console
/home/deploy/.rvm/gems/ruby-3.3.6/gems/webrick-1.3.1/lib/webrick/utils.rb:60: warning: Socket.gethostbyname is deprecated; use Addrinfo.getaddrinfo instead.
WickedPdf.config= is deprecated and will be removed in future versions. Use WickedPdf.configure instead.
Loading development environment (Rails 8.0.1)
3.3.6 :001 > helper.asset_path("application.js")
app/assets/javascripts/application.js:7: couldn't find file 'jquery.ui.tabs' with type 'application/javascript' (Sprockets::FileNotFound)
Checked in these paths: ...

I’ve exhausted our current knowledge on this upgrade and need guidance on two points:

Where should jquery.ui.tabs be located, and what should its content be?
How do I update the asset references (especially for jquery UI components) to work with newer versions of Rails and the associated gems?

Any help to resolve these asset pipeline issues would be greatly appreciated.

Comments 0

•

Answers 3

•

3 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

Below is some guidance to resolve the issue with the missing jquery.ui.tabs file:

Background

In older Rails apps using Sprockets the asset references for jQuery UI modules were sometimes written using the dot syntax (e.g. “jquery.ui.tabs”). With newer versions of the jquery‑ui‑rails gem (and Rails 8+ in your case), the provided asset paths have changed. In your error logs Sprockets can’t find “jquery.ui.tabs” because that file isn’t in any of the asset load paths.

What You Should Do

Use the Assets Provided by jquery‑ui‑rails Gem

The jquery‑ui‑rails gem now organizes its files under a new naming convention. For example, the tabs widget is available as:
- For JavaScript:
  Replace any reference to “jquery.ui.tabs” with the correct path such as:
```
JAVASCRIPT
//= require jquery-ui/widgets/tabs
```
- For CSS:
  Similarly, if you need the CSS part for the tabs widget, include the appropriate stylesheet provided by the gem or require the complete jquery‑ui stylesheet:
```
CSS
/* 
 *= require jquery-ui/themes/base/all
 */
```
  (or if you want just tabs, see the documentation for the specific partial names provided by the gem)

Update Your Manifest Files

In your app/assets/stylesheets/application.css you currently have:

CSS
/*
 *= require_tree .
 *= require_self
 *= require jquery.ui.tabs
 *= require jquery.ui.button
 *= require jquery.ui.datepicker
 * require jquery.ui.accordion
*/

Change these directives to the new format provided by jquery‑ui‑rails. For example:

CSS
/*
 *= require_tree .
 *= require_self
 *= require jquery-ui/widgets/tabs
 *= require jquery-ui/widgets/button
 *= require jquery-ui/widgets/datepicker
 *= require jquery-ui/widgets/accordion
*/

(Make sure that these filenames match the ones provided by your version of jquery‑ui‑rails.)

Double-Check Your Gemfile and Asset Paths

Ensure that the Gemfile includes the jquery‑ui‑rails gem:
```
RUBY
gem 'jquery-ui-rails'
```
Then run:
```
BASH
bundle install
```
The asset pipeline (including your manifest at app/assets/config/manifest.js) already includes the jquery‑ui‑rails assets in its search paths.
Remove Obsolete Files/References

If your app once contained manually placed jQuery UI files, you might remove those to avoid conflicts. With the jquery‑ui‑rails gem, you should rely on the gem’s asset paths.

Summary

The file “jquery.ui.tabs” should not be expected in your app’s assets folder; it’s provided by the jquery‑ui‑rails gem.
Change your Sprockets directives in your manifest files to correctly reference the updated paths, for example:
//= require jquery-ui/widgets/tabs
Verify that your Gemfile includes jquery‑ui‑rails and that you’ve restarted your server after making these changes.

This should resolve the RoutingError and Sprockets::FileNotFound issues you’re experiencing.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by UranianStargazer866 • 1 month ago

The solution to the assets not being available/found is:

With Rails 5 and later (I believe?), the syntax of the module spec changes: Instead of jquery.ui it becomes jquery-ui. This applies to the stylesheets and javascripts.
The sprockets-rails gem is required
Once the above hurdle was crossed, we also needed the execjs gem and install nodejs (sudo apt install nodejs) on the host. Since this was a new installation, that had not been done.

Thankyou Alex for the pointers and tips as well.

The application now runs on with Rails 8!

No comments yet.

Answer by MeteoricRover119 • 1 month ago

Looks to me like you're missing sprockets, add it to your gemfile:

RUBY
# Gemfile

gem "sprockets-rails"

https://guides.rubyonrails.org/upgrading_ruby_on_rails.html#sprockets-is-now-an-optional-dependency

link_tree and link_directory directives take relative path as an argument:

JAVASCRIPT
// app/assets/config/manifest.js

//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_directory ../javascripts .js

https://github.com/rails/sprockets#link_directory

RUBY
# without sprockets
>> helper.javascript_include_tag(:application)
=> "<script src=\"/javascripts/application.js\"></script>"

# with sprockets
>> helper.javascript_include_tag(:application)
=> "<script src=\"/assets/application-ae778b0c5ff925b3fb061ac99992128eebea5a50e9151c5cae4ff2a66b2fe7c1.js\"></script>"

No comments yet.

Discussion

No comments yet.