Rendering js from a Rails controller with webpacker

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

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;