webpack, jquery and dynamic form field

I’m using webpack and jQuery in my symfony project.
I configured webpack and jquery as follows :

// webpack.common.js
const path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: {
    main: "./src/default/index.js"
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      { 
        test: /datatables.net.*/, 
        use: [{
          loader: 'imports-loader',
          options: {
            additionalCode: 
              "var define = false;"
          }
        }]
      },
      {
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          exposes: ["$", "jQuery"],
        },
      },
      {
        test: /.(scss)$/,
        use: [{
          // inject CSS to page
          loader: 'style-loader'
        }, {
          // translates CSS into CommonJS modules
          loader: 'css-loader'
        }, {
          // Run postcss actions
          loader: 'postcss-loader',
          options: {
            // `postcssOptions` is needed for postcss 8.x;
            // if you use postcss 7.x skip the key
            postcssOptions: {
              // postcss plugins, can be exported to postcss.config.js
              plugins: function () {
                return [
                  require('autoprefixer')
                ];
              }
            }
          }
        }, {
          // compiles Sass to CSS
          loader: 'sass-loader'
        }]
      },
      {
        test: /.css$/i,
        use: ["style-loader", "css-loader"],
      }
    ]
  },
  resolve: {
    alias: {
      jquery: "jquery/src/jquery"
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })
  ]
}

// index.js
import 'bootstrap';

import './scss/app.scss';

import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';
import '@fortawesome/fontawesome-free/js/brands';

require('select2');

require('jquery-ui/ui/widgets/datepicker');
require('jquery-ui/ui/i18n/datepicker-fr.js')

import 'datatables.net';
import dt from 'datatables.net-bs5';

import 'datatables.net-bs5/css/dataTables.bootstrap5.min.css';

dt(window, $);

My project needs to load external javascript script (old style) so I need to access $ outside of webpack. This scripts use Select2 plugin for initialize autocompletion on select form element.

So far so good.

I’m facing a problem when I want to add dynamically a field that use jQuery select2 Plugin (after page loading).

When I do this (adding new select2 field in my form) and initialize select field with select2 :

if ( "undefined" !== typeof jQuery ) {
    (function($, window, document) {
        $(function() {
           $('.select2-element').select2(config);
        });
    }(window.jQuery, window, document));
}

The result is : “Select2 is not defined.”

First test

When I do :

if ( "undefined" !== typeof jQuery ) {
    (function($, window, document) {
        $(function() {
           console.info($.fn);
        });
    }(window.jQuery, window, document));
}

The result shows me that select2 is in the $.fn list ($.fn.select2). But the same code invoked after page loading show me that select2 is not in the list.

Second test

When I do on page loading :

if ( "undefined" !== typeof jQuery ) {
    (function($, window, document) {
        $(function() {
           console.info(jQuery);
           console.info($);
        });
    }(window.jQuery, window, document));
}

The return of console.info(jQuery) is not the same as console.info($). In the first I don’t have select2 in jQuery.fn but it is present in $.fn .

I identified that the $ object used after page loading is same as jQuery object above not $ object above.

Thanks for your help.