如何无错误导入node_modules？解决Supabase模块解析失败报错

你遇到的错误是因为浏览器原生ES模块不支持"裸导入路径"（即@supabase/supabase-js这种不带/、./、../的包名），只有Node.js或打包工具能解析这类路径。以下是三种可行的解决方法：

方案1：使用浏览器原生导入映射（Import Maps） #

这是无需打包工具的原生解决方案，通过在HTML中定义映射关系，让浏览器识别裸导入路径：

1. 在website/index.html的<head>标签中添加导入映射：

<script type="importmap">
  {
    "imports": {
      "@supabase/supabase-js": "../node_modules/@supabase/supabase-js/dist/index.esm.js"
    }
  }
</script>

2. 保持app.js中的导入代码不变：

import { createClient } from "@supabase/supabase-js";

注意：确认../node_modules/@supabase/supabase-js/dist/index.esm.js是实际存在的文件，若路径不对，可查看node_modules/@supabase/supabase-js/package.json中的module字段确定正确的入口文件。

方案2：直接使用相对路径导入 #

跳过裸导入，直接写浏览器能识别的相对路径指向node_modules中的文件：
修改app.js的导入代码：

import { createClient } from '../node_modules/@supabase/supabase-js/dist/index.esm.js';

方案3：使用打包工具（推荐生产环境） #

如果是生产项目，建议用打包工具（如Vite、Parcel）处理模块解析，同时优化代码体积：

以Vite为例： #

1. 安装Vite：

npm install vite --save-dev

2. 在项目根目录的package.json中添加运行脚本：

{
  "scripts": {
    "dev": "vite website",
    "build": "vite build website"
  }
}

3. 启动开发服务器：

npm run dev

此时Vite会自动解析裸导入路径，你可以正常使用import { createClient } from "@supabase/supabase-js";，生产环境运行npm run build会生成优化后的静态文件。

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