Using Select2 with npm / webpack resolves in JS Error "Cannot read properties of undefined (reading 'getAttribute') at Object.Utils.GetUniqueElementId"

[julianlaibach]

I installed Select2 with npm and use webpack to bundle the JS files.

My JS Code is as follows:

let select2 = require("select2")
$(window).load(function () {
        $('select').each( function() {
            $(this).select2();
        })
})

Im not sure if im importing / require select2 wrong but even if i do:

import select2 from "select2"

I am getting the following JS Error:

Uncaught TypeError: Cannot read properties of undefined (reading 'getAttribute')
    at Object.Utils.GetUniqueElementId (app.js?ver=1.0.0:12182:29)
    at Object.Utils.GetData (app.js?ver=1.0.0:12217:20)
    at Select2 (app.js?ver=1.0.0:16939:15)
    at Module../resources/js/public_app.js (app.js?ver=1.0.0:19:94)
    at __webpack_require__ (app.js?ver=1.0.0:32890:42)
    at app.js?ver=1.0.0:33032:87
    at Function.__webpack_require__.O (app.js?ver=1.0.0:32924:23)
    at app.js?ver=1.0.0:33035:53
    at app.js?ver=1.0.0:33037:12

It seems like something is missing / wrong. jQuery is globally available.

Thanks!

[sadeghbarati]

@kevin-brown Hi any plan to convert AMD to ESM?

select2 is an AMD or CMD 😐 module, don't know what is these, but it's the previous module loader of the web,

https://seajs.github.io/seajs/docs/en.html#quick-start https://requirejs.org/ almond

---

with npm we got these problems:

1. select2 is not immediately available in $.fn maybe besause setTimeout in requirejs source

2. select2 has no named export

// no point for naming 
import select2 from 'select2'
import * as select2 from 'select2'

3. select2 set language with npm and documentation with npm usage

$.fn.select2.defaults.set("language", $.fn.select2.amd.require("select2/i18n/fa"));
// Uncaught Error: No select2/i18n/fa

4. select2 use Grunt taskrunner to bundle, instead of rollup - webpack - parcel - vite

---

to solve this problem partially ✅

1. dynamic import

// jquery.js
import jQuery from "jquery";
Object.assign(window, { $: jQuery, jQuery })

// select2.js
import jQuery from "jquery";

// i18n Cannot read properties of undefined (reading 'define')
import "select2/dist/js/i18n/fa"


import("select2/dist/js/select2.full").then((S) => {
   console.log(S);
   console.log(S.default);
  //S.default();
  console.log(jQuery.fn);

  jQuery.fn.select2.defaults.set("width", "100%");
  jQuery.fn.select2.defaults.set("dir", "rtl");
  jQuery.fn.select2.defaults.set("theme", "bootstrap-5");
  jQuery.fn.select2.defaults.set("language", "fa"); // not working
});

2. require as function ( I did not test ) https://datatables.net/download/npm

const jQuery = require('jquery')
require('select2/dist/js/select2.full')(jQuery)

[agitnaeta]

i try same thing, still have issue

window.$ = jQuery;
select2 = require('select2')($)

Uncaught TypeError: Cannot read properties of undefined (reading 'getAttribute')
    at t.define.t.GetUniqueElementId

in my cases it just install on first time, and not definde any <select> element

[mikeydevelops]

This is because select2 favors amd plugin first and then nodejs/commonjs modules. Webpack by default adds support for amd plugins, you can disable it like so:

webpack.config.js

module: {
    rules: [
        { parser: { amd: false } }
    ]
}

Maybe the devs can change the factory to favor commonjs first and then amd modules.