npm安装toastify-js后导入报模块解析失败如何解决

这个报错的核心原因是浏览器原生ES模块规范不支持直接识别npm包的裸模块名（即不带路径前缀的包名写法），Toastify官方文档给出的导入语句，默认使用者已经配置了Vite、Webpack、Rollup这类前端打包工具，并非直接在无构建的原生浏览器环境中运行代码。

• 如果你使用Vite/Webpack/Rollup等构建工具开发项目

  1. 先确认你在项目根目录（即存放package.json的目录）执行过安装命令：npm install toastify-js
  2. 导入语句直接写在需要调用吐司提示的业务JS/TS文件顶部即可，构建工具会自动完成裸模块名到真实文件路径的解析，不需要手动加相对路径前缀
  3. 别忘了额外引入库自带的样式文件，否则吐司提示会没有默认样式：import 'toastify-js/src/toastify.css'

• 如果你没有使用任何构建工具，直接编写原生HTML/JS运行项目
  不要直接复用官方给的npm导入写法，你可以把node_modules目录下的toastify-js相关JS、CSS文件复制到自己项目的静态资源目录中，使用符合浏览器要求的带路径前缀的方式导入，示例写法：

  <!-- 引入吐司样式 -->
  <link rel="stylesheet" href="/your-static-path/toastify.css">
  <script type="module">
    // 路径必须以/、./、../开头，指向你项目内实际存放toastify-js文件的位置
    import Toastify from '/your-static-path/toastify-js.js'
    
    // 正常调用即可
    Toastify({
      text: "测试吐司提示",
      duration: 3000
    }).showToast()
  </script>
  

补充说明：无构建的原生浏览器环境没有权限直接读取node_modules目录下的依赖文件，所以所有导入的模块路径必须是浏览器可以直接请求访问到的静态资源地址，这也是报错信息里要求相对引用必须以/、./、../开头的原因。

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