Rendering js from a Rails controller with webpacker
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 --dev2) 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;
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 = jQuerywindow.$ = $