JavaScript模块导入报错求助：两类语法/类型错误排查

错误原因及对应修复步骤 #

1. 第一个错误：Uncaught SyntaxError: import declarations may only appear at top level of a module

浏览器默认将普通<script>标签当作传统脚本处理，不支持ES模块的import语法，必须明确标记脚本类型为模块。

修复：
给所有引入脚本的<script>标签添加type="module"属性：

• index.html中的脚本标签修改为：

<script type="module" src="index.js"></script>

• products.html中的脚本标签修改为：

<script type="module" src="products.js"></script>

2. 第二个错误：Uncaught TypeError: The specifier “.” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”

浏览器的ES模块要求相对导入路径必须包含完整的文件后缀（比如.js），不会自动补全文件名后缀，你的导入语句缺少了后缀导致识别失败。

修复：
修改products.js中的导入语句，补上.js后缀：

import { checkRegex, addAnimation, increaseByHeight, timeout } from "./index.js";

window.onload = () => {
    const watch = document.querySelector('.watch')
    const items = document.querySelectorAll('.item')

    timeout(3000, setInterval(() => {
        items.forEach((item, idx) => {
            addAnimation(item, 'animated', 1)
        })
    }, 500))
}

额外注意事项 #

• 模块脚本默认会延迟执行（等同于添加了defer属性），无需额外处理脚本加载顺序与DOM就绪的冲突。
• 直接用file://协议打开本地HTML文件可能触发CORS错误，建议使用本地开发服务器（如VS Code的Live Server插件）运行项目。

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