纯 JS - SyntaxError：不能在模块外使用 import 语句

Question

注意：我知道这是一个非常常见的问题，但我使用的是纯 Javascript，因此我无法使用 StackOverflow 上的 Node.js 解决方案来修复它

我正在尝试从Picmojs安装Popup 选择器，但这真的很棘手，因为它不是作为脚本标签导入的常用库。

出于某种原因，我的代码在 Fiddle 中运行，但是一旦在我的 web 页面上实现，它就会抛出SyntaxError: Cannot use import statement outside a 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() });

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

但是，当在 Bubble（无代码编辑器）的 HTML 元素上使用时，出现错误。

当代码用于 Fiddle 上的脚本标签时，我也会得到相同的结果（示例）

 //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">

关于为什么这不起作用的任何提示？ 我真的很感激！

Answer 1

主要思想是在与您自己的代码相同的 scope 中导入。 尝试这样的事情：

<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>

当然，标签内的JS代码可以放在单独的文件中

纯 JS - SyntaxError：不能在模块外使用 import 语句

问题描述

1 个解决方案

解决方案1
0 2022-08-11 11:09:55

纯 JS - SyntaxError：不能在模块外使用 import 语句

问题描述

1 个解决方案

解决方案1 0 2022-08-11 11:09:55

解决方案1
0 2022-08-11 11:09:55