title: Migrating Rails from Asset Pipeline to Webpacker: Uncaught ReferenceError: $ is not defined in rails-ujs.js
body: <p>I am migrating from using the asset pipeline to webpacker in Rails 5.2.  My AJAX responses are all causing <code>Uncaught ReferenceError: $ is not defined</code> in rails-ujs.js errors in the browser console.</p>
  
  <p>I have setup my webpacker environment to include jquery.</p>
  
  <pre><code>const { environment } = require('@rails/webpacker');
  const webpack = require('webpack');
  
  environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  }));
  
  module.exports = environment;
  </code></pre>
  
  <p>I have imported rails-ujs and turbolinks in my ../packs/application.js</p>
  
  <pre><code>import Rails from 'rails-ujs'
  import 'activestorage'
  import 'bootstrap'
  ...
  import Turbolinks from "turbolinks"
  
  Rails.start();
  Turbolinks.start();
  
  // Import application specific stuff
  import 'application/javascripts'
  </code></pre>
  
  <p>I then try to add a class when the request is completed. similar to what is shown in the rails guides 
  <a href="https://guides.rubyonrails.org/working_with_javascript_in_rails.html#server-side-concerns" rel="noreferrer">https://guides.rubyonrails.org/working_with_javascript_in_rails.html#server-side-concerns</a></p>
  
  <p>My show.js.erb file looks like this</p>
  
  <pre><code>$("#result").addClass("active")
  </code></pre>
  
  <p>I get an error</p>
  
  <pre><code>Uncaught ReferenceError: $ is not defined
      at &lt;anonymous&gt;:1:1
      at processResponse (rails-ujs.js:282)
      at rails-ujs.js:195
      at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:263)
  </code></pre>