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

Question

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!

KaKi87 · Accepted Answer · 2022-08-29 15:36:57Z

2

+50

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>

answered Aug 29, 2022 at 15:36

KaKi87

9457 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Neil D Over a year ago

Thank you for the explanation KaKi87, and the simplified example. Do you have any idea how I can make jQuery available to an imported module that has it listed as an external dependency, which has javascript in the form 'import e from 'jquery''? Thanks again!

KaKi87 Over a year ago

jQuery, when imported, always create global $ and jQuery variables, that won't change. So, if you import 'jquery' before importing the other module you're talking about, then the latter will have access to $ and jQuery from window.

Neil D Over a year ago

In the end I imported jQuery in the calling JS, passed a reference into the module, and then referenced jQuery from the module using the advice at this SO answer

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related