如何修复SyntaxError: import declarations may only appear at top level of a module报错

出现该错误的核心原因是浏览器默认将未声明type="module"的script标签加载的JS文件识别为普通脚本，原生不支持ES模块的import/export语法，你可以选择以下任意一种方案修复：

• 方案1：修改script标签声明为ES模块
  把你原有的引入代码改为：

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

  改完后浏览器会将app.js识别为ES模块，即可正常使用import语法。需要注意两个限制：
  • 不要直接用file://协议打开本地HTML文件运行，ES模块会触发跨域限制，需要部署在本地静态服务（比如VS Code的Live Server插件）上运行
  • ./socket.io-client的路径要对应HTML文件的相对路径，确保资源可正常访问
• 方案2：改用UMD格式的socket.io-client，取消模块导入
  先下载socket.io-client的UMD版本文件到本地项目目录，在引入app.js之前先引入该UMD文件，会自动挂载全局io变量：

  <script src="./socket.io-client.umd.min.js"></script>
  <script src="app.js"></script>
  

  之后删掉app.js顶部的import { io } from "./socket.io-client";语句，直接调用io方法即可。
• 方案3：使用前端构建工具打包
  如果项目使用Vite、Webpack、Rollup等前端构建工具，工具会自动处理ES模块导入语法，将代码编译为普通JS可识别的格式，打包后的产物直接用原有的普通script标签引入即可，不需要额外修改属性。

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