Filterrific and Rails 6

[chrisedington]

Wondering if anyone has had any luck getting things running with Rails 6 and Webpacker?

I'm confused about the following:

1. What is the best way to include the filterrific-jquery.js?

I've added it under 'packs' and then included it into application.js using require("packs/filterrific-jquery.js"); but it doesn't want to work. I get 'Uncaught ReferenceError: $ is not defined'.

2. How does one handle the erb.js files ?

Related to above, I normally put the following code into a .js.erb file with the same name as my main view:

<% js = escape_javascript(
  render(partial: 'users/list', locals: { users: @users })
) %>
$("#filterrific_results").html("<%= js %>");

I moved this into my view file as it wasn't being triggered by the .js.erb file -- but again run into the 'Uncaught ReferenceError: $ is not defined'. I have jQuery in my yarn as well as application.js -- sample below:

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("modernizr/modernizr.custom.js");

// require("@rails/ujs").start()
// //require("turbolinks").start()
// require("@rails/activestorage").start()
// require("channels")
require("packs/filterrific-jquery.js");
// require("jquery")
require("jquery")
window.jQuery = $;
window.$ = $;

//--- Bootstrap
import 'bootstrap';

import appInit from './angle/app.init.js';
document.addEventListener('DOMContentLoaded', appInit);

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

Would really appreciate any feedback or ideas as to what I can try here and the best practice - cant see anything on StackOverflow/other issues.

[euxx]

To access $, you need to config jQuery in config/webpack/environment.js like this

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

https://stackoverflow.com/questions/54905026/how-to-add-jquery-third-party-plugin-in-rails-6-webpacker

[JSanderbeck]

The only way I have found so far to make this work is by copying the javascript file (filterrific-jquery.js) to the packs folder and adding the following to the application.js file...

import { Filterrific } from './filterrific-jquery';
global.Filterrific = Filterrific;

if I point to the filterrific/filterrific-jquery file directly I get it cannot find the module. Anyone else have luck with this?

John