script模块标签导入createPopup函数报错未定义，求正确导入方法？

你的问题核心是模块脚本的作用域隔离：带有type="module"的脚本会创建独立作用域，内部导入的变量不会自动暴露到全局，而你单独的JS部分是普通脚本，无法访问模块作用域里的createPopup。

以下是两种可行的修正方式：

方式1：将所有逻辑整合到模块脚本中 #

直接把JS逻辑写到type="module"的script标签内，这样就能直接使用导入的函数：

<button id="button">打开表情选择器</button>
<script type="module">
import { createPopup } from 'https://unpkg.com/@picmo/popup-picker@latest/dist/index.js?module';

const triggerButton = document.getElementById('button');
const picker = createPopup();

// 绑定触发事件，点击按钮显示选择器
triggerButton.addEventListener('click', () => {
  picker.show(triggerButton);
});
</script>

方式2：将独立JS部分设为模块类型（适用于Fiddle环境） #

在Fiddle的JavaScript设置里，把脚本类型改为Module，然后直接在JS部分导入并使用：

import { createPopup } from 'https://unpkg.com/@picmo/popup-picker@latest/dist/index.js?module';

const triggerButton = document.getElementById('button');
const picker = createPopup();

triggerButton.addEventListener('click', () => {
  picker.show(triggerButton);
});

此时HTML部分只需保留触发按钮即可，无需额外的导入script标签。

内容的提问来源于stack exchange，提问作者vnihoul