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;