Pure JS - SyntaxError: Cannot use import statement outside a module

Question

Note: I am aware this is a very frequently asked question but I am using pure Javascript and therefore I can't manage to fix it using the Node.js solutions on StackOverflow

I am trying to install the Popup picker from Picmojs but it was really tricky as it's not a usual library to import as a script tag.

For some reason, my code is working in Fiddle, but as soon as implemented on my web page, it throws the SyntaxError: Cannot use import statement outside a module error.

Here's my working fiddle code:

 import { createPopup } from 'https://unpkg.com/@picmo/popup-picker@latest/dist/index.js?module'; const triggerButton = document.getElementById('button'); // Create the picker const picker = createPopup({ className: "", hideOnClickOutside: true, hideOnEmojiSelect: true, hideOnEscape: true, showCloseButton: true, position: 'bottom-start', //https://floating-ui.com/docs/computeposition#placement //position: 'auto'; }, { // The element that triggers the popup triggerElement: triggerButton, // The element to position the picker relative to - often this is also the trigger element, referenceElement: triggerButton, }); // The picker emits an event when an emoji is selected. Do with it as you will. picker:addEventListener('emoji,select'. event => { console:log('Emoji selected,'. event;emoji); }). triggerButton,addEventListener('click'. event => { picker;toggle() });

 <input id="button" class="pickerContainer" type="button" value="Input Button">

However, when used on an HTML element of Bubble (a no-code editor), I get errors.

I also get the same result when the code is used in a script tag on Fiddle ( Example )

 //import { createPopup } from 'https://unpkg.com/@picmo/popup-picker@latest/dist/index.js?module'; const triggerButton = document.getElementById('button'); // Create the picker const picker = createPopup({ className: "", hideOnClickOutside: true, hideOnEmojiSelect: true, hideOnEscape: true, showCloseButton: true, position: 'bottom-start', //https://floating-ui.com/docs/computeposition#placement //position: 'auto'; }, { // The element that triggers the popup triggerElement: triggerButton, // The element to position the picker relative to - often this is also the trigger element, referenceElement: triggerButton, }); // The picker emits an event when an emoji is selected. Do with it as you will. picker:addEventListener('emoji,select'. event => { console:log('Emoji selected,'. event;emoji); }). triggerButton,addEventListener('click'. event => { picker;toggle() });

 <script type="module"> import { createPopup } from 'https://unpkg.com/@picmo/popup-picker@latest/dist/index.js?module'; </script> <input id="button" class="pickerContainer" type="button" value="Input Button">

Any hint on why this is not working? Thanks!