总结一下我的情况

• 我在本地运行一切
• 我在虚拟环境的后端使用flask
• 目标：在Flask后端和JS前端之间建立套接字连接
• 问题：问题出在基于JS的前端，我无法导入用npm获得的模块

我导入的模块如下所示：
从“套接字.io-client”导入{ io }
从“/@mediapipe/hands”导入{ Hands }
我还尝试了不同的导入变体，例如import * as io from“socket.io-client”，我还尝试了直接导入文件，如下所示：从“socket.io-client/dist/socket.io”导入{io}，但都没有成功，因为这些会导致“未找到”错误。
我确信我用npm正确地安装了它们，因为我可以在文件夹结构中看到它们，但是es6导入抛出了如下错误：无法解析模块说明符“socket.io-client”。相对引用必须以“/"、“./"或“../"开头-为了解决此问题，我尝试在不同的位置添加斜线，例如在包含脚本的html标记中，我尝试按照在线推荐的方法将“type=“module”转换为“type="/module”，但没有成功。此外，在导入中构建直接引用，如“./node_modules/socket.io-client”不起作用，因为它声明找不到文件/文件夹。
问题一定是导入的使用，因为当我使用内容交付网络时一切正常，这也让我假设包的版本不是问题，因为我从CDN获得的版本是相同的，但仍然是我使用的版本：

• socket.io-client:4.6.0
• @介质管/手：0.4.1675469240
• 培养瓶：2.2.3
• 闪光灯-插座IO：5.3.2
• 国家预防机制：8.19.3
• 节点：16.19.1

我的文件夹结构如下：

• 文夫
• main.py
• 模板
• index.html
• 静态
• 节点模块（包括套接字.io-client和@mediapipe/hands）
• 日本
• main.js（出现问题的js文件）
• package.json

我读了几次，建议使用“Webpack”，但我想跳过目前，因为我不是很熟悉，所以一个问题也将是：有必要用吗？
我可能会做错什么，或者当我的问题是关于es6模块的导入时，我如何跟踪我的问题？
我将感激任何帮助。先谢了！