How do I use emoji-picker-element in a simple HTML page (no modules)?

[benplanetstream]

Hello team,

I have a simple HTML page which links to a main.js script that has my javascript in it.

As per the instructions, I have added <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script> to my HTML file, and in the javascript file (in an event listener) I have added

import { Picker } from 'emoji-picker-element';
const picker = new Picker();
document.body.appendChild(picker);

This results in an error

import declarations may only appear at top level of a module

but I do not have any modules.

If I put <emoji-picker></emoji-picker> directly in the HTML, or insert it as an element with appendChild, it works fine, but I want to add custom emojis, so I understand that I need to use the Javascript API to do so.

How can I make const picker = new Picker(); work in my situation?

Thanks!

[benplanetstream]

I worked out how to do it! I suggest adding it to the documentation for users who aren't within modules:

import("https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js").then((module) => {
    const picker = new module.Picker();
    document.body.appendChild(picker);      
});

[nolanlawson]

That looks right. Is there a reason you're not using ES modules, out of curiosity?

[benplanetstream]

Thanks! The main reasons are that it's an old project (probably from before ES modules existed - I think I made it around 2011), and I'm a backend developer with minimal JS experience - I don't even know what ES modules are :)