2

I'm confused as to exactly what I need to do to run my old jQuery snippets and Rails UJS along with Turbo.

DHH added this PR in June that was supposed to improve compatibility, but it lacks details on exactly how the setup should work.

I still have a bunch of legacy jQuery and UJS snippets throughout my app, but I also am trying to move to Turbo. I initially attempted to drop UJS entirely, but it's just too much at one time. At this point, I'm running Rails 6.1.4.1 with Webpacker and do not have any UJS gems in my Gemfile.

The upgrade page says:

"Rails UJS is offered either directly from the Rails framework or by the classic jquery-ujs plugin."

Does this mean that UJS is now built into Rails and is not a separate gem? Or should I add gem 'jquery-rails' to my Gemfile?

What about my package.json? I now need to go back in and yarn add jquery-ujs as indicated here?

What about application.js? I had previously imported @rails/ujs here, like:

import Rails from "@rails/ujs"
Rails.start()

When I added Turbo, I commented out these lines. Are they necessary or no?

And regarding jQuery, I had cobbled together (pasted from other sites) a way to use the $ global:

var jQuery = require('jquery')
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;

Is this no longer necessary?

Edit to include dependencies portion of package.json and application.js ...

package.json

  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.2",
    "@hotwired/turbo-rails": "^7.0.0-rc.5",
    "@rails/request.js": "^0.0.5",
    "@rails/webpacker": "5.4.2",
    "chart.js": "^3.0.2",
    "chartkick": "^4.0.2",
    "cssnext": "^1.8.4",
    "expose-loader": "^2.0.0",
    "flatpickr": "4.6.6",
    "jquery": "^3.6.0",
    "lodash": "^4.17.21",
    "select2": "4.0.13",
    "signature_pad": "^3.0.0-beta.4",
    "slim-select": "1.26.1",
    "stimulus": "^2.0.0",
    "stimulus-flatpickr": "^1.4.0",
    "tippy.js": "^6.3.1",
    "trim-canvas": "^0.1.2"
  }

application.js

// Allow global access to jQuery and $
var jQuery = require('jquery')
global.$ = global.jQuery = jQuery;
window.$ = window.jQuery = jQuery;

// This was uncommented when I used rails/ujs
// import Rails from "@rails/ujs"

import "@hotwired/turbo-rails"

// This was uncommented when I used rails/ujs
// Rails.start()

// select2 menus
require("select2")

// tooltips
import tippy from 'tippy.js'
import 'tippy.js/dist/tippy.css';

// stimulus js
import { Application } from "stimulus"

// Flatpickr date picker
import Flatpickr from "stimulus-flatpickr"

import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
application.register("flatpickr", Flatpickr)
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))
dwayne
  • 118
  • 7
  • You still need @rails/ujs. Are you using jquery-ujs at this moment or just jquery? If you just use jquery you don't have to add jquery-ujs @rails/ujs replaces jquery-ujs. Are you using jquery in your app/assets folder? In that case you can make jquery global. But if you use jquery only in your app/javascript folder you can just import it in your javascript files where you are using jquery. – Smek Sep 28 '21 at 13:41
  • Thanks, @Smek. I only have stylesheets in app/assets. I migrated all my JS to app/javascript, handled by webpack. jquery is loaded in package.json. I'm not using jquery-ujs. So can I just `yarn add @rails/ujs`, or do I also need a gem? And, then, in application.js, do I need the `import Rails ...` and `Rails.start()` lines, or does this happen automatically? – dwayne Sep 28 '21 at 14:48
  • yarn add @rails/ujs is enough. You do need import Rails ... and Rails.start(). – Smek Sep 28 '21 at 14:51
  • Thanks, I'll give this a shot. I've gotten twisted around because Hotwire first said it was incompatible with UJS, so I tried to remove it; then they came back and said, not so fast, maybe they can co-exist. – dwayne Sep 28 '21 at 14:59
  • It replaces Turbolinks so when you are using Turbolinks you will replace it with Turbo. There is a guide here https://dev.to/coorasse/from-turbolinks-to-turbo-31jl. – Smek Sep 28 '21 at 18:03

0 Answers0