Rendering Js From A Rails Controller With Webpacker

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 { re

Solution 1:

Figured it out thanks to this wonderful article!

Use expose-loader to expose key libraries to vanilla JavaScript sprinkled throughout your app.

1) Install dependency,

yarn add expose-loader --dev

2) Configure config/webpack/environment.js,

const { environment } = require('@rails/webpacker');

environment.config.merge({
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: '$'
        }, {
          loader: 'expose-loader',
          options: 'jQuery'
        }]
      },
      {
        test: require.resolve('rails-ujs'),
        use: [{
          loader: 'expose-loader',
          options: 'Rails'
        }]
      }
    ]
  }
});

module.exports = environment;

Solution 2:

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.$ = $