fixed "SyntaxError: The requested module '/jquery/dist/jquery.js' does not provide an export named default"

[vivazzi]

jquery.js module must have export default function, if it is need to import like this import $ from 'jquery';, but jquery does not have export default function. In this pull request I added other way to use jquery: import * as Jquery from 'jquery';, which load module to Jquery variable.

Another way can be to use separated file (says, named jquery_compat.js), like this:

import 'jquery.js';
export default window.jQuery.noConflict(true);

And in Select2.vue to use:

import $ from "./jquery_compat.js";

If it need I will fix my pull request with second way of bug solution.

Using import * as Jquery from 'jquery'; is a bit ugly way in my opinion, because we cannot use jQuery.noConflict. But I don't know another way to fix this bug. If anyone knows a better fix than both above, please comment.

[vivazzi]

Sorry, I accidentally forgot to create a new branch from npm-publish-code-for-vue3. If you want I can create a new pull request with a new branch

[vivazzi]

Unfortunately, my pull request gets error when I run vite build:

index.813ae237.js:1 ReferenceError: $ is not defined

In production code I see that jQuery was loaded to index.813ae237.js, but it seems component did not apply window.jQuery = window.$ = jQuery;.

I don't know why it do so...

My all scenarios of running Select2:

1. If Select.vue has import $ from 'jquery'; on line 8 (as in repo owner):

• 1.1. if I run vite dev, then I get error:

Uncaught SyntaxError: The requested module '/node_modules/.pnpm/[email protected]/node_modules/jquery/dist/jquery.js?v=d0d02272' does not provide an export named 'default'

• 1.2. if I run vite build and vite preview, then I get error:

index.6b32860a.js:1 TypeError: Bc(...).find(...).select2 is not a function
    at Proxy.mounted (index.6b32860a.js:31:4388)
    at en (index.6b32860a.js:1:12559)
    at St (index.6b32860a.js:1:12638)
    at Array.r.__weh.r.__weh (index.6b32860a.js:1:22610)
    at Lo (index.6b32860a.js:1:14082)
    at et (index.6b32860a.js:1:41980)
    at mount (index.6b32860a.js:1:31893)
    at Object.r.mount (index.6b32860a.js:1:53415)
    at index.6b32860a.js:31:5272

2. If Select.vue has import * as jQuery from 'jquery'; on line 8 (as in my pull request):

• 2.1. if I run vite dev, my code works good.

• 2.2. if I run vite build and vite preview, then I get error:

index.813ae237.js:1 ReferenceError: $ is not defined
    at Proxy.mounted (index.813ae237.js:31:4347)
    at en (index.813ae237.js:1:12559)
    at St (index.813ae237.js:1:12638)
    at Array.Mr.r.__weh.r.__weh (index.813ae237.js:1:22610)
    at Lo (index.813ae237.js:1:14082)
    at et (index.813ae237.js:1:41980)
    at mount (index.813ae237.js:1:31893)
    at Object.r.mount (index.813ae237.js:1:53415)
    at index.813ae237.js:31:5271

AI try different ways to fix this bug, but all my attemps are failed. Has anybody ideas to decide this problem?

I found some information about it in jquery repo: https://github.com/jquery/jquery/issues/4592

[javad-heidarpour]

Check this link:

https://www.mapledesign.co.uk/tech-blog/vite-bootstrap-4-jquery/

[javad-heidarpour]

But then it gives me an error again:

[soolingiprop]

import * as jQuery from 'jquery';
import select2 from 'select2';
select2(jQuery);

its working on laravel + vue3

[vivazzi]

It seems this repository is abandoned (there are no new updates). I suggest to use other solutions of filterable select in vue without jquery (more details: https://github.com/godbasin/vue-select2/issues/58#issuecomment-1247546556).

But this pull request demonstare more global problem with jquery integration with vite + vue, so I didn't close or delete this pull request. This information can be useful for someone.

When Jquery will have ESM support, this information in this pull request will be deprecated.