Having trouble implementing this.

[fallenturtle]

I'm having some sort of syntax issue I think getting this off the ground. I've added: import { DisclosureMenu } from "https://esm.sh/accessible-menu@4.0.1"; to my js file, but the console gives a syntax error: mainnav.js?v=9.5.9:1 Uncaught SyntaxError: The requested module 'https://esm.sh/accessible-menu@4.0.1' does not provide an export named 'DisclosureMenu'

I also tried pointing the import statement at the location of the file in my project, but that gives me the same error: import { DisclosureMenu } from "/libraries/accessible-menu/dist/disclosure-menu.iife.js";

I tried removing the {} from around DisclosureMenu but then it says its not a constructor. Any idea what I'm doing wrong? Thanks!

Here's a codepen of the issues I'm running into https://codepen.io/fallenturtle/pen/vYqOOXw

[NickDJM]

esm.sh looks like it does something weird with the exports. Looks like you'd have to do:

import AccessibleMenu from "https://esm.sh/accessible-menu@4.0.1";

const menu = new AccessibleMenu.DisclosureMenu({...});

That's not super ideal, but it'll work. I'll see if I can change that somewhere in the project. Maybe there's something I can define for esm.sh.

Your local example doesn't work because the iife formatted files just declare the menu globally. If you want to use imports, you can do:

import DisclosureMenu from "libraries/accessible-menu/dist/disclosure-menu.es.js";

const menu - new DisclosureMenu({...});

If you want to use the iife file, then you can just add it as a script above your own in your html:

<script src="/libraries/accessible-menu/dist/disclosure-menu.iife.js"></script>
<script>
  // You can use DisclosureMenu globally anywhere under here.

  const menu - new DisclosureMenu({...});
</script>

[fallenturtle]

Thank you, I was able to get it working.

[stierpm]

I'm sorry, but I am also unable to get this implemented and am running into similar errors using the recommended approach in the docs.

[NickDJM]

@stierpm How are you including the library? NPM, jsdelivr, esm.sh, etc.?

[stierpm]

@NickDJM - jsdelivr

[NickDJM]

@stierpm Ah ok, the iife just exposes a global class for you so theoretically you can just remove your import line and move on.

Once you do that, you're currently importing the entire library so you'll need to use new AccessibleMenu.DisclosureMenu({ ... }) instead of new DisclosureMenu({ ... }).

If you are only planning on using the DisclosureMenu class, then I would recommend importing https://cdn.jsdelivr.net/npm/accessible-menu/dist/disclosure-menu.iife.js instead of the entire library; It's a lot smaller.

Also, if you would like to use imports then use the .es.js files instead of the .iife.js ones. They're set up to be used as modules.

[NickDJM]

@stierpm Following up on this. Did it work following the advice above? If so, I'll close this.

[stierpm]

@NickDJM - This did work, but overall, did not end up working for my particular situation. I found a different solution though that does work. Thank you for following up and sorry for the delayed response.

I would consider updating the documentation page accordingly, however.

[NickDJM]

@stierpm Are you able to post your solution? That way I can look into incorporating a few different examples into the docs.