Consuming jquery using importmap gives error "The requested module 'jquery' does not provide an export named 'default'"

user_19820477 0
Viewed 91

I have written a module with a peer dependency on JQuery.

I'm trying to access it from a vanilla JS app though, and am getting the following error:

Uncaught SyntaxError: The requested module 'jquery' does not provide an export named 'default'

The first line in the component (it's been through rollup) is:

import e from 'jquery'

I have an importmap in the vanilla JS I am calling it from:

<script type="importmap">

       {
       "imports": {
           "jquery":"https://code.jquery.com/jquery-3.6.0.min.js"
       }
       }
   </script>

I then include a module:

<script type="module" src="/js/shim.js"></script>

Where shim.js contains:

import { setSubscriptionLevel, setAjaxUrl, initializeCarousels } from './carousel.js'

This fails.

Indeed, the following fails in shim.js too:

import e from 'jquery'

Although both of the following succeed:

import * as $ from 'jquery';
import e from 'https://code.jquery.com/jquery-3.6.0.min.js';

Any ideas?

Thanks!

es6-modules jquery javascript
1 Answers

jQuery isn't meant to be imported as ESM.

Which is why, even the following works :

<script type="importmap">
    {
        "imports": {
            "jquery": "https://code.jquery.com/jquery-3.6.0.min.js"
        }
    }
</script>
<script type="module">
    import 'jquery';
    console.log($);
    console.log(jQuery);
</script>
user_84589650
Related