Nuxt 3 & Postgresql: Cannot access 'renderer1ドル' before initialization

Question

I am working locally on an application built with Nuxt.js 3 and using Postgreql. I am finding that I am running into the following error message: Cannot access 'renderer1ドル' before initialization

1: No Prisma

./plugins/db.js

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

Line 1 is commented out but for the record if line 1 is uncommented it throws the following error: SyntaxError: The requested module './node_modules/pg/lib/index.js' does not provide an export named 'Client' | Lines 2 and 3 are the solution proposed by the answers here: Can I import the node-postgres module (pg) or is it CommonJS only?

This throws the [nuxt] [request error] [unhandled] [500] Cannot access 'renderer1ドル' before initialization error.

Note that if I don't use Nuxt 3's recommended defineNuxtPlugin wrapper, this works, but only kind of. If db.js is as follows:

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

In this case, I am able to return rows from my db in my application.

./server/api/test.get.ts

import client from "~/plugins/db";
const rows = client.query('SELECT * from test');
export default defineEventHandler(async() => {
 return new Promise<any>((resolve) => {
 resolve(rows);
 });
});

However, there are other problems elsewhere if I do this:

1. I get this warning: WARN Plugin ./plugins/db.ts is not wrapped in defineNuxtPlugin. It is advised to wrap your plugins as in the future this may enable enhancements.
2. Console error: Uncaught ReferenceError: Buffer is not defined
3. A VueUse utility I am using elsewhere in my application no longer works.

2. With Prisma

I deleted my old ./plugins/db.ts code and went through the Prisma setup guide only to arrive at the same Cannot access 'renderer1ドル' before initialization error:

./server/api/test.get.ts

//import { Pool } from 'pg'
import * as pg from 'pg'
const { Pool } = pg
import { PrismaPg } from '@prisma/adapter-pg'
import { PrismaClient } from '@prisma/client'
const connectionString = `${process.env.DATABASE_URL}`
const pool = new Pool({ connectionString })
const adapter = new PrismaPg(pool)
const prisma = new PrismaClient({ adapter })
export default defineEventHandler(async () => {
 return await prisma.notes.findMany();
});

Any idea what might be going wrong or how I can go about troubleshooting this error?

Answer 1

Also came across the same issue..... I was mainly caused by a missing API Key in the .env file. It was fixed by adding the required API key.

I'd advise checking the logs very well; you'd probably find some hints there.

Answer 2

I have resolved a similar issue by deleting and then re-adding the server folder of my project.