Node.js+EJS项目JS模块导入与静态资源引用报错排查

错误原因 #

三个报错为连锁触发，核心问题共3个：

• 静态资源路径配置错误：express.static('public')会将项目下的public目录映射为静态资源根目录，访问静态资源时URL不需要携带/public前缀。当前代码中写的/public/javascript/xxx.js路径，会让Express去查找public/public/javascript/xxx.js位置的文件，必然返回404。
• MIME类型报错是404的派生错误：Express返回404页面时响应头的Content-Type是text/html，浏览器尝试把HTML文档当作JS模块解析，就会触发MIME类型不允许的拦截。
• 语法报错原因：写有import语句的内联script标签没有添加type="module"属性，普通script脚本不支持ES Module的导入语法，因此抛出“import声明只能出现在模块顶层”的错误。

额外排查到的代码问题：

1. 两个引用路径不一致：一个script标签写的是/public/javascript/loggedinFunctions/taskboard/api/kanbanAPI.js，内联import写的是/public/javascript/api/kanbanAPI.js，其中只有一个是文件真实存储路径。
2. kanbanAPI.js内部存在变量名错误：定义的列变量是kanbanColumn，判断非空时用的是未定义的column变量，运行时会触发引用错误。
3. VS Code点击路径可跳转是编辑器基于本地文件系统的路径识别逻辑，和Express静态服务的URL映射规则无关，不能作为服务端路径正确的判断依据。

修复步骤 #

• 修正所有静态资源引用路径，去掉所有JS引用路径开头的/public前缀，和文件实际在public目录下的存储层级保持一致。
• 所有使用ES Module语法（import/export）的script标签，不管是外链式还是内联式，都必须添加type="module"属性。外链式单独引入模块的代码可以删除，ES模块的import语句会自动加载依赖文件，不需要重复引入。
• 修正kanbanAPI.js内的变量名错误，补全函数返回逻辑。

修正后代码参考 #

EJS文件脚本部分 #

<script type="module">
  // 路径替换为文件实际位置，去掉/public前缀
  import KanbanAPI from "/javascript/loggedinFunctions/taskboard/api/kanbanAPI.js"
  console.log(KanbanAPI.getItems(1));
</script>

kanbanAPI.js 修正后代码 #

export default class KanbanAPI {
  static getItems(columnId){
    const kanbanColumn = read().find(column => column.id == columnId);
    if (!kanbanColumn){
      return [];
    }
    // 补全找到列后的返回逻辑，根据实际业务调整返回内容
    return kanbanColumn.items;
  }
}

注：现有全局路径中间件不影响静态资源路由，不需要调整。

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