How to require select2 with webpacker/Rails? - ruby-on-rails

Question

I’ve been using select2 via CDN. I started migrating CDN to using the webpacker gem. I stumbled upon a difficulty, where I can’t import/require or in any way include it. So here is my setup:
I’ve migrated select2 via the following steps:
yarn add select2
Below is my environment.js file (this is the configuration file, that webpacker uses to configure webpack):
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: ['popper.js', 'default']
})
)
module.exports = environment
environment.js
require("select2")
I tried all kinds of require and many others, but none of these seem to work. Please, advise. Thank you.

Answer 1

Here's what I would check:
Install Webpacker in your Rails project properly, per the project README. If you're starting with a Rails 6 app, this will be done by default.
Add both jquery and select2:
yarn add jquery select2
Add a select box to the DOM
<select class="js-states" name="state">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
Import jquery, select2 and select2 css and apply to the select box when the page is loaded:
import $ from 'jquery'
import 'select2'
import 'select2/dist/css/select2.css'
window.addEventListener('DOMContentLoaded', () => {
$('.js-states').select2()
})
For development, set compile: true in config/webpacker.yml. Running the webpack-dev-server is optional.
Those are the steps I took to create this demo: https://github.com/rossta/rails6-webpacker-demo/compare/example/select2