Nuxt 3 + PostgreSQL报错：Cannot access 'renderer$1' before initialization

问题概述 #

本地开发基于Nuxt.js 3和PostgreSQL的应用时，无论使用原生pg库还是Prisma，均触发Cannot access 'renderer$1' before initialization错误，同时伴随其他环境兼容问题，以下是具体场景及解决方案：

1. 未使用Prisma的场景 #

问题分析 #

• 直接导出pg客户端实例，未用Nuxt 3要求的defineNuxtPlugin包裹，且未限制插件仅在服务端运行，导致客户端环境（浏览器）执行了仅适用于Node.js的pg库代码，触发Buffer is not defined等错误，进而引发renderer$1初始化问题。
• 重复声明const { Client } = pg;属于冗余代码，但不直接导致错误。
• import { Client } from 'pg'报错是因为部分pg版本的ES模块导出仅支持默认导入后解构。

解决方案 #

步骤1：修正插件代码并限制服务端加载

将插件文件命名为db.server.js（后缀.server告诉Nuxt仅在服务端执行），并用defineNuxtPlugin包裹，提供全局可用的客户端实例：

// ./plugins/db.server.js
import pg from 'pg';
const { Client } = pg;

export default defineNuxtPlugin(() => {
  const client = new Client({
    host: 'localhost',
    port: 5432,
    database: 'dbname',
    user: 'username',
    password: 'password',
  });
  client.connect();

  return {
    provide: {
      pgClient: client
    }
  };
});

步骤2：验证效果

• 插件包裹后，「未用defineNuxtPlugin」的警告消失；
• 仅服务端执行插件代码，客户端不会加载pg，Buffer is not defined错误消除；
• VueUse工具因客户端环境恢复正常而重新生效。

2. 使用Prisma的场景 #

问题分析 #

• 在API路由顶层直接创建Pool和PrismaClient实例，热重载时会重复初始化实例，可能引发模块循环依赖或初始化顺序问题，导致renderer$1错误；
• 未确保pg与@prisma/adapter-pg版本兼容，也可能触发初始化异常。

解决方案 #

步骤1：创建Prisma单例实例

在server/utils目录下新建prisma.ts，创建全局单例避免重复初始化：

// ./server/utils/prisma.ts
import { PrismaClient } from '@prisma/client';
import { PrismaPg } from '@prisma/adapter-pg';
import * as pg from 'pg';
const { Pool } = pg;

// 全局单例避免热重载重复创建
const prisma = globalThis.prisma || new PrismaClient({
  adapter: new PrismaPg(new Pool({ 
    connectionString: process.env.DATABASE_URL 
  }))
});

if (process.env.NODE_ENV !== 'production') {
  globalThis.prisma = prisma;
}

export default prisma;

步骤2：在API路由中使用单例

修改test.get.ts导入单例实例：

// ./server/api/test.get.ts
import prisma from '../utils/prisma';

export default defineEventHandler(async () => {
  return await prisma.notes.findMany();
});

步骤3：环境与版本检查

• 确保根目录.env文件中DATABASE_URL配置正确（格式：postgresql://username:password@localhost:5432/dbname）；
• 核对pg、@prisma/client、@prisma/adapter-pg的版本兼容性，建议使用官方文档推荐的版本组合。

错误根源总结 #

Cannot access 'renderer$1' before initialization本质是客户端环境执行了仅服务端可用的Node.js模块，导致模块初始化失败。通过将数据库操作代码限制在服务端（插件用.server后缀、API路由放在server目录、使用单例模式管理数据库实例），即可彻底解决该错误。

内容的提问来源于stack exchange，提问作者d-fws