title: New to Ruby on Rails, Javascript functionality not working
body: <p>I'm rather new to Ruby on Rails (and programming in general), and I've been following through a tutorial to try and get the basics down, but I've stumbled across some functionality that the tutorial doesn't seem to properly set up.</p>
  <p>What I've been able to figure out is that apparently JavaScript-related functionality in general is just not working (my symptoms so far are that a bootstrap-triggered dropdown doesn't appear and the <code>link-to</code> method just ignores any <code>method:</code> code passed to it and only sends a <code>GET</code> request), but I'm not sure what I need to do to get this stuff to work - I've tried everything I can find.</p>
  <p>What I have done:</p>
  <ul>
  <li><p>Run <code>$ yarn add jquery bootstrap</code></p>
  </li>
  <li><p>Made sure my <code>application.html.erb</code> file contains <code>&lt;%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %&gt;</code></p>
  </li>
  <li><p>Added the following code to <code>config/webpack/environment.js</code>:</p>
  <pre><code>  const webpack = require('webpack')
    environment.plugins.prepend('Provide',
      new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
      })
    )
  </code></pre>
  </li>
  <li><p>Set up my <code>assets/javascript/packs/application.js</code> file to look like this:</p>
  <pre><code>  // 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 jquery
    //= require jquery_ujs
    //= require jquery-ui
    //= require_tree .
  
    import Rails from &quot;@rails/ujs&quot;
    import Turbolinks from &quot;turbolinks&quot;
    import * as ActiveStorage from &quot;@rails/activestorage&quot;
    import &quot;channels&quot;
  
    import &quot;jquery&quot;
    import &quot;bootstrap&quot;
  
    Rails.start()
    Turbolinks.start()
    ActiveStorage.start()
  </code></pre>
  </li>
  </ul>
  <p>And for the record, the problematic code bits are:</p>
  <ul>
  <li><p>Failing dropdown code (the dropdown menu simply does not appear on click):</p>
  <pre><code>  &lt;li class=&quot;dropdown&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-bs-toggle=&quot;dropdown&quot; id=&quot;dropdownMenuLink&quot;&gt;
          PLACEHOLDER &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;
        &lt;/a&gt;
        &lt;ul class=&quot;dropdown-menu&quot;&gt;
          &lt;li&gt;&lt;%= link_to &quot;Settings&quot;, '#' %&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%= link_to 'Profile', current_user %&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  </code></pre>
  </li>
  <li><p>Failing <code>link_to</code> code (it sends a <code>GET</code> request instead of a <code>DELETE</code> request):</p>
  <pre><code>  &lt;li&gt;&lt;%= link_to 'Log out', logout_path, method: :delete %&gt;&lt;/li&gt;
  </code></pre>
  </li>
  </ul>
  <p>I don't feel like I have the background knowledge to further investigate. What am I missing in all of this? Am I completely off base as to what the problem is?</p>