使用importmap引入interact.js时出现“SyntaxError: Unexpected identifier”错误

问题原因 #

你遇到的Uncaught SyntaxError: Unexpected identifier 'interactjs'错误，核心是import语句的语法错误——模块标识符必须用字符串（单/双引号）包裹，直接写interactjs会被解析为变量而非模块名。另外还要确保CDN链接指向的是ES模块版本的文件。

修复步骤 #

1. 修正import语句的语法错误 #

将模块名用引号包裹，正确的import写法如下：

import interact from 'interactjs';

2. 确保importmap指向ES模块版本 #

部分CDN的默认文件是UMD/全局版本，不支持ES模块导入。建议替换为interact.js的ES模块分发版本：

修改后的importmap配置：

<script type="importmap">
    {
        "imports": {
            "interactjs": "https://cdn.jsdelivr.net/npm/interactjs/dist/interact.esm.min.js"
        }
    }
</script>

完整可运行代码示例 #

<script type="importmap">
    {
        "imports": {
            "interactjs": "https://cdn.jsdelivr.net/npm/interactjs/dist/interact.esm.min.js"
        }
    }
</script>

<script type="module">
    import interact from 'interactjs';

    interact('.item').draggable({
        onmove(event) {
            console.log(event.pageX, event.pageY)
        },
    })
</script>

补充说明 #

你之前用<script src="...">能正常运行，是因为这种方式是将interact.js作为全局变量注入，而importmap+模块导入需要严格遵循ES模块的语法规范，同时依赖文件本身是ES模块格式。

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