Upgrading from Rails 6 to 7: jquery-ujs and actioncable not working

Question

Upgrading from Rails 6 to 7: jquery-ujs and actioncable not working

1k views Asked by Harry Mattocks At 22 November 2022 at 00:27

I've just upgraded my Rails 6 app to Rails 7, and now my Javascript and ActionCable aren't working.

After a bit of googling, I now know that this is because my app is set up to use sprockets with the asset pipeline, not webpacker or import maps.

How can I upgrade my app to work with Rails 7? Is it possible to continue using sprockets and jquery-ujs? I couldn't find much online to help me with this so I'm hoping someone on here knows what to do.

app/assets/javascripts/application.js:

//= require jquery
//= require jquery_ujs
//= require activestorage
//= require cloudinary/jquery.cloudinary
//= require_tree .
//= require cable
//= require local-time
//= require serviceworker-companion
//= require cookies_eu
//= require gmaps/google

import "stylesheets/application";

//javascript functions below here

This is the directory layout:

Original Q&A

There are 1 answers

**widjajayd** · Answer 1 · 2022-11-22T02:23:00+00:00

below are steps that I did to upgrade rails 6 to 7 apps. I'm using sprocket and combined with new rails 7 Hotwire

1. install importmap and hotwire

as noted from DHH, rails 7 replacing Webpacker, Turbolinks, UJS with import maps plus Turbo and Stimulus from Hotwire as the defaults. you can learn from https://hotwired.dev/ to get more information. since my application using Sprockets, here is the steps that I use

2. install importmap

since importmap and hotwire-rails gem already installed from previous step, I just need to install it run rails importmap:install

3. install hotwire

run rails hotwire:install

4. Change turbolinks to turbo

since hotwire turbo replacing turbolinks below are steps that I did
open file app/assets/javascripts/application.js (since I use sprocket)
delete line //= require turbolinks

5. Using your text editor search inside app/views/

find turbolinks:load replace with turbo:load
save and close all

6. using your text editor search inside app/assets/javascripts/

find div data-turbolinks replace with div data-turbo
save and close all

7. Merge Sprocket with importmap

Change file name app/assets/javascripts/application.js to any name that fit with you, for me I change to application_pipeline.js
Reason to change: since new javascript folder also using application.js inside app/javascript/application.js
Create one manifest file app/assets/config/manifest.js
(if folder config not exist you can create manually)
below are the content for my settings

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

../images to call folder inside app/assets/images
../stylesheets .css to call .css file inside app/assets/stylesheets
../javascript .js to call .js file inside app/assets/javascript
../../javascript .js to call js files within app/javascript to this new folder created when we - install importmap-rails
../../../vendor/javascript to call js files within rails root/vendor folder

8. Setting for application.html.erb

open file app/views/layouts/application.html.erb and change

    <head>
      ...
      <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
      <%= javascript_include_tag "turbo", type: "module-shim" %>
      <%= javascript_include_tag "application_pipeline", "data-turbo-track" => true %> 
      <%= javascript_importmap_tags %>
    </head>

9. Add precompiled list in production

open file file config/initializers/assets.rb
change and increase version number if you want to total precompile
Rails.application.config.assets.version = “3.3”
Here is the sample, you can increase to any number for example 3.4 or 4.0

    # Be sure to restart your server when you modify this file.
    Rails.application.config.assets.version = "3.3"
    Rails.application.config.assets.precompile += %w( application_pipeline.js )
    Rails.application.config.assets.precompile += %w( controllers/hello_controller.js )
    Rails.application.config.assets.precompile += %w( controllers/index.js )

as you can see second line above I included application_pipeline.js inside this asset list
do precompile by running rails assets:precompile

I wrote complete article, based from my own experience upgrading rails 6 to 7 my applications and here is the link

TechQA.

Upgrading from Rails 6 to 7: jquery-ujs and actioncable not working

There are 1 answers

1. install importmap and hotwire

2. install importmap

3. install hotwire

4. Change turbolinks to turbo

5. Using your text editor search inside app/views/

6. using your text editor search inside app/assets/javascripts/

7. Merge Sprocket with importmap

8. Setting for application.html.erb

9. Add precompiled list in production

Related Questions in RUBY-ON-RAILS

Related Questions in WEBPACK

Related Questions in ACTIONCABLE

Related Questions in UJS

Popular Questions

Popular Tags

Trending Questions