Rendering js from a Rails controller with webpacker

Question

Just replaced the js pipeline in my Rails app with webpacker.

Most things work correctly, however controllers that render js no longer work as expected.

def action
  format.js { render "javascript_partial" }
end

Normally, the above would execute a file in my view called javascript_partial.js.erb or action.js.erb if not specified in render.

The problem seems to be that these files have no connection to the webpacker pipeline and thus cannot access global libraries like jquery or explicitly manage their own imports.

This code now causes client-side syntax errors because it cannot access the jquery $ function:

$("#element").html(<= j render partial: 'partial', locals: { object: @object } %>

I have a related problem with in-line js in my views. Something like the following,

<%= form.collection_select ... onchange: 'Rails.fire(this.form, "submit")' %>

no longer works, because in-line js cannot access global objects such as Rails.

This seems to be a straightforward problem but I cannot find documentation anywhere.

Does anyone how to harmonize webpacker with historically expected Rails/js behavior? Do I need to bring back sprockets?

---

If it helps, my javascript/packs/application.js file looks something like,

import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';

Rails.start();
Turbolinks.start();

$(document).on("turbolinks:load", () => {
  // initial setup ...
});

The above works perfectly fine, and has access to jquery because I've exported it in config/webpack/environment.js,

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  jquery: 'jQuery'
}));

Answer 1

I had a similar problem where I had undefined $ on the string $("#element").html(insert_code)

My configuration is similar to yours I solved by exposing at the end of the file pack/application.js

window.jQuery = jQuery
window.$ = $