1

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!

Neil D
  • 91
  • 9

1 Answers1

1

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>
KaKi87
  • 915
  • 7
  • 15
  • 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! – Neil D Aug 30 '22 at 18:01
  • jQuery, when imported, always create global `$` and `jQuery` variables, that won't change. So, if you `import 'jquery'` before `import`ing the other module you're talking about, then the latter will have access to `$` and `jQuery` from `window`. – KaKi87 Aug 31 '22 at 07:59
  • 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](https://stackoverflow.com/questions/43783307/how-to-import-jquery-into-a-typescript-file) – Neil D Sep 02 '22 at 10:51