Error while using "npm:@planetscale/database" with fresh

[bjesuiter]

Hello there,

SideNote:
I know that npm specifiers are an unstable feature, but since I have working code with them (see section More Analysis) I wonder which difference there is between executing the problematic code directly in deno or by executing it in the index.tsx of fresh.

SideNote 2:
Here is the source Repo of this request for even more detail:
https://github.com/jbscratch/planetscale-in-deno

What do I want to do

I tried to run the following in the default index.tsx page:

import Counter from "@/islands/Counter.tsx";
import { db } from "@/src/db/index.ts";

const pets = await db.selectFrom("pets").selectAll().execute(db);
console.log("\n Pets Table");
console.table(pets);


export  default function Home() {
  
  return (
    <div class="p-4 mx-auto max-w-screen-md">
      <img
        src="/logo.svg"
        class="w-32 h-32"
        alt="the fresh logo: a sliced lemon dripping with juice"
      />
      <p class="my-6">
        Welcome to `fresh`. Try updating this message in the ./routes/index.tsx
        file, and refresh.
      </p>
      <Counter start={3} />

      <hr></hr>

      <ul>
        {pets.map((pet: {id: number, name: string}) => <li>{pet.name}</li>)}
      </ul>

    </div>
  );
}

Unfortunately, this fails with:

The Error Message

error: Uncaught (in promise) ReferenceError: __DENO_NODE_GLOBAL_THIS_1663958299__ is not defined
    at file:///Users/bjesuiter/Library/Caches/deno/npm/registry.npmjs.org/@planetscale/database/1.3.0/dist/sanitization.js:1:18

Further Information

This error appears to come from the package @planetscale/database which is setup in @src/db/index.ts

// import { db } from "@/src/db/index.ts";

// Added this empty import line to force download of @planetscale/database npm package,
// since normally it's transitively used by kysely-planetscale without the `npm:` identifier
// See Github issue: https://github.com/denoland/deno/issues/16013
import {} from "npm:@planetscale/database@1.3.0";

import { Kysely } from "kysely";
import { PlanetScaleDialect } from "kysely-planetscale";

import { PetsTable } from "./PetsTable.ts";

// Keys of this interface are table names.
interface Database {
  pets: PetsTable;
}

export const db: Kysely<Database> = new Kysely<Database>({
  dialect: new PlanetScaleDialect({
    host: Deno.env.get("DATABASE_HOST"),
    username: Deno.env.get("DATABASE_USERNAME"),
    password: Deno.env.get("DATABASE_PASSWORD"),
  }),
});

However, it actually does arise first when adding the query:

const pets = await db.selectFrom("pets").selectAll().execute(db);

More Analysis

I can run the following sucessfully:

Command:

deno run --unstable --allow-env=DATABASE_HOST,DATABASE_USERNAME,DATABASE_PASSWORD --allow-net=aws.connect.psdb.cloud ./scripts/db/list-pets.ts

File Content of ./scripts/db/list-pets.ts:

import { db } from "@/src/db/index.ts";

const result = await db.selectFrom("pets").selectAll().execute(db);
console.log("\n Pets Table");
console.table(result);

Last Question

Where is the difference from running this code in standalone deno
or running this query inside the index.tsx with the fresh Framework?

[bjesuiter]

Update: It works when directly starting main.ts!

deno run --unstable -A main.ts

What is different when running the fresh project through the dev() server?

[steverandy]

I'm also seeing a similar issue but with mongodb driver.

When using the mongodb driver in dev mode, I got the following error:

error: Uncaught (in promise) Error: Cannot find module 'crypto'
Require stack:
- /Users/steve/Library/Caches/deno/npm/registry.npmjs.org/mongodb/4.10.0/lib/operations/add_user.js
- /Users/steve/Library/Caches/deno/npm/registry.npmjs.org/mongodb/4.10.0/lib/admin.js
- /Users/steve/Library/Caches/deno/npm/registry.npmjs.org/mongodb/4.10.0/lib/index.js
- /Users/steve/Library/Caches/deno/npm/registry.npmjs.org/mongodb/4.10.0/lib/index.js
    at Function.Module._resolveFilename (deno:ext/node/02_require.js:615:17)
    at Function.Module._load (deno:ext/node/02_require.js:447:29)
    at Module.require (deno:ext/node/02_require.js:658:21)
    at require (deno:ext/node/02_require.js:789:18)
    at Object.<anonymous> (file:///Users/steve/Library/Caches/deno/npm/registry.npmjs.org/mongodb/4.10.0/lib/operations/add_user.js:4:16)
    at Object.<anonymous> (file:///Users/steve/Library/Caches/deno/npm/registry.npmjs.org/mongodb/4.10.0/lib/operations/add_user.js:73:4)
    at Module._compile (deno:ext/node/02_require.js:719:36)
    at Object.Module._extensions..js (deno:ext/node/02_require.js:752:12)
    at Module.load (deno:ext/node/02_require.js:636:34)
    at Function.Module._load (deno:ext/node/02_require.js:493:14)

[bjesuiter]

@steverandy Maybe your problem is a little different to mine.

Deno currently does not import peer dependencies for npm packages automatically, so you have to add an empty 'import {} from "npm:your-missing-packet@version"' to somewhere in your runtime.

You can look my other issue here for details:
denoland/deno#16013

My problem is that I get this error about a missing global which is cryptic to me bc. I don't know which rubbing file is causing it.

I suspect, it's the fresh dev mode somehow, by maybe isolating my main Programm more.

But! maybe I'm wrong here that your problem is different to mine. Does your code work when running main.ts directly, like with my code?

[steverandy]

@bjesuiter

Yes. It works when I run main.ts directly. No errors.

I also tried adding import {} from "npm:mongodb"; to dev.ts and now it also works in dev.
Do you know why it behaves this way? Is there a documentation around this behavior? Thanks!

[bjesuiter]

@steverandy
Yes, you can read the thread in my other issue: denoland/deno#16013

The reason seems to be that deno doesn't load peer dependencies yet,
so the mongodb client gets not automatically loaded into the runtime when it's needed.
Maybe you have some import from "npm:mongodb somewhere in your main.ts but not in the dev.ts runpath,
so that the mongo-db client was already available on the runtime when starting from main.ts.

[lucacasonato]

Closing as duplicate of #978