title: Rails 6.1.3, webpacler, select2, getting error: readyException.js:6 Uncaught TypeError: $(...).select2 is not a function
body: <p>I am new with Rails 6 and webpacker. I have created a new app with rails and webpacker, got everything working but when I tried to utilize the select2 I ran into a problem where I get readyException.js:6 Uncaught TypeError: $(...).select2 is not a function errors and not am not able to submit the selected attribute to the database. I have reviewed and tried several suggestions presented on the web but didn't work. Not sure where I went wrong. Any help is much appreciated. By the way I am using simple_form and Slim.</p>
  <p>app/assets/application.scss</p>
  <pre><code>@import 'bootstrap/scss/bootstrap';
  </code></pre>
  <p>app/javascript/stylesheets/application.scss</p>
  <pre><code>@import 'bootstrap/scss/bootstrap';
  </code></pre>
  <p>app/javascript/packs/application.js</p>
  <pre><code>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;popper.js&quot;;
  import &quot;bootstrap&quot;;
  import &quot;../stylesheets/application&quot;
  import &quot;@fortawesome/fontawesome-free/js/all&quot;
  import select2 from 'select2';
  import 'select2/dist/css/select2.css';
  
  
  require(&quot;@rails/activestorage&quot;).start()
  require(&quot;channels&quot;)
  require(&quot;jquery&quot;)
  
  
  
  Rails.start()
  Turbolinks.start()
  ActiveStorage.start()
  
  
  $(document).ready(function() {
    $('.select').select2();
  });
  </code></pre>
  <p>config/webpack/environment.js</p>
  <pre><code>const { environment } = require('@rails/webpacker')
  
  const webpack = require('webpack')
  environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
      $: 'jquery/src/jquery',
      jQuery: 'jquery/src/jquery'
    })
  )
  
  module.exports = environment
  </code></pre>
  <p>the view form
  views/users/_form.html.slim</p>
  <pre><code>    = simple_form_for [:admin, @user] do |f|
        = f.error_notification
        = f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present?
  
  
        .form-inputs.form-group.center-block style=&quot;width:240px&quot;
          = f.input_field :first_name,
          placeholder: 'First Name',
          class: 'form-control',
          autofocus: true,
          required: true
        .form-inputs.form-group.center-block style=&quot;width:240px&quot;
          = f.input_field :last_name,
          placeholder: 'Last Name',
          class: 'form-control',
          autofocus: true,
          required: true
        .form-inputs.form-group.center-block style=&quot;width:240px&quot;
          = f.input_field :email,
          placeholder: 'Email',
          class: 'form-control',
          autofocus: true,
          required: true
        .form-inputs.form-group.center-block style=&quot;width:240px&quot;
          = f.select :roles, Role.all.map { |role| role.name }, {include_blank: true, required: true,
          include_hidden: false}, class: 'form-control', input_html: {class: 'select'}
  
  
        .form-actions.form-group.center-block style=&quot;width:240px&quot;
          button.btn.btn-primary.space-above type=&quot;submit&quot; Save
          = link_to &quot;Cancel&quot;, admin_users_path, class: 'btn btn-default space-left'
  </code></pre>