title: JS loaded up through Webpack but not executing
body: <p>I have some custom javascript in my application that toggles the visibility of a password field.  I am adding the javascript in my Rails 6 application through webpacker.</p>
  <p>The code seems to import ok (I can see it loaded up in the console) but for some reason it's not executing and I just can't figure out why. Looking online I saw that this might be a scoping issue but I am unsure how to check or how to fix it.</p>
  <p><strong>app/javascript/packs/application.js</strong></p>
  <pre><code>require(&quot;@rails/ujs&quot;).start()
  require(&quot;turbolinks&quot;).start()
  require(&quot;@rails/activestorage&quot;).start()
  require(&quot;channels&quot;)
  
  import &quot;../stylesheets/application&quot;
  import &quot;bootstrap&quot;
  import &quot;../custom/theme&quot;
  </code></pre>
  <p><strong>config/webpack/environment.js</strong></p>
  <pre><code>const { environment } = require('@rails/webpacker')
  const webpack = require(&quot;webpack&quot;)
  
  environment.plugins.prepend(&quot;Provide&quot;, new webpack.ProvidePlugin({
    $: &quot;jquery&quot;,
    jQuery: &quot;jquery&quot;,
    jquery: &quot;jquery&quot;,
    Popper: [&quot;popper.js&quot;, &quot;default&quot;]
  }))
  
  module.exports = environment
  </code></pre>
  <p><strong>app/javascript/custom/theme.js</strong>
  I'm fairly certain that this code is ok. I even added console.logs within the function and those appear in the console without a problem.</p>
  <pre><code>
  ;(function ($) {
    'use strict';
  
    const theme = {
      init: () =&gt; {
        theme.passwordVisibilityToggle();
      },
  
      passwordVisibilityToggle: () =&gt; {
  
        let elements = document.querySelectorAll('.cs-password-toggle');
  
        for (let i = 0; i &lt; elements.length; i++) {
          let passInput = elements[i].querySelector('.form-control'),
          passToggle = elements[i].querySelector('.cs-password-toggle-btn');
      
          passToggle.addEventListener('click', (e) =&gt; {
            
            if (e.target.type !== 'checkbox') return;
            if (e.target.checked) {
              passInput.type = 'text';
            } else {
              passInput.type = 'password';
            }
  
          }, false);
        }
      }
    }
    
    theme.init();
  
  })(jQuery);
  </code></pre>
  <p><strong>HTML</strong> Again, pretty sure this is ok but just adding for reference.</p>
  <pre><code>&lt;div class=&quot;input-group-overlay cs-password-toggle form-group&quot;&gt;
    &lt;div class=&quot;input-group-prepend-overlay&quot;&gt;&lt;span class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fe-lock&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;/div&gt;
    &lt;%= f.password_field :password, autocomplete: &quot;current-password&quot;, placeholder: &quot;Password&quot;, required: true, class: &quot;form-control prepended-form-control&quot; %&gt;
    &lt;label class=&quot;cs-password-toggle-btn&quot;&gt;
      &lt;input class=&quot;custom-control-input&quot; type=&quot;checkbox&quot;&gt;&lt;i class=&quot;fe-eye cs-password-toggle-indicator&quot;&gt;&lt;/i&gt;&lt;span class=&quot;sr-only&quot;&gt;Show password&lt;/span&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  
  </code></pre>