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? I would really appreciate it!
1 answers
solution1
0 2022-08-11 11:09:55
Main idea to have import in the same scope as your own code. Try something like that:
<html>
<input id="button" class="pickerContainer" type="button" value="Input Button">
<script type="module">
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>
</html>
Of course, JS code inside tag may be placed in a separate file
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.