select2 - 'default' is not exported

[glapworth]

Hi there.

I'm in the process of upgrading a large rails app from 6 to 7. In Rails 6 we were using Webpacker and have decided to use vite to manage javascript in the new version.

In development using /bin/vite dev, I am able to compile javascript without any errors, but when it comes to compilation with vite build --clear --mode=development it fails with the following error:

'default' is not exported by node_modules/select2/dist/js/select2.js, imported by app/javascript/entrypoints/application.js
file: app/javascript/entrypoints/application.js:18:7
16: import 'jqueryui';
17: 
18: import select2 from 'select2';
           ^

My application.js looks like the following:

import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false
import Turbolinks from "turbolinks"
import * as  Rails  from "@rails/ujs"
window.Rails = Rails

import "bootstrap";
import 'jqueryui';

import select2 from 'select2';
import 'select2/dist/css/select2.min.css';
select2();

and my vite.config.ts has the following settings:

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import inject from "@rollup/plugin-inject";

export default defineConfig({
  plugins: [
    RubyPlugin(),
    inject({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
  resolve: {
    alias: [
      {
        // this is required for the SCSS modules
        find: /^~(.*)$/,
        replacement: '$1',
      },
    ],
  },
  build: {
  },
})

When I change the require line for select2 like so:

import * as select2 from 'select2';

It will compile, but select2 does not work on the page when I visit it in the browser; instead I get the console error to say

Uncaught  TypeError: select2 is not a function

I guess this means it isn't loaded.

I can't quite see how to resolve this. Does anyone have any tips? I expect I'm missing some config from my vite.config.ts but I'm at a bit of a loss.

Thanks for your help.

[ElMassimo]

Hi Gareth!

It's likely that select2 is packaged in a way that confuses Rollup or Esbuild, and doesn't work as expected in ESM.

If it works in development, and you are using Vite 3, perhaps you should try using esbuild when building, with:

        build: {
          // Avoid using @rollup/plugin-commonjs
          commonjsOptions: {
            include: [],
          },
        },
        // Use esbuild at build time.
        optimizeDeps: {
          disabled: false,
        },

This is the default behavior in Vite 4.

[glapworth]

Wonderful!! That was very helpful. Thanks for your time!!