Module build failed: UnhandledSchemeError: Reading from "node:crypto" is not handled by plugins

my src/lib/supabase/db.ts file looks like thsi :

import {drizzle} from "drizzle-orm/postgres-js";
import postgres from "postgres";
import * as schema from "../../../migrations/schema";
import {migrate} from "drizzle-orm/postgres-js/migrator";
if (!process.env.DATABASE_URL) {
    console.log('Cannot find database url')
  }
const client = postgres(process.env.DATABASE_URL as string, {max:1});
const db = drizzle(client, { schema });
const migrateDb = async () => {
    try {
        console.log("🟠 migrating db");
        await migrate(db,{ migrationsFolder : "migrations"});
        console.log("🟢 migrated db");
        
    } catch (error) {
        console.log("🔴 failed to migrate db",error);
    }
}
migrateDb();


export default db;

import {drizzle} from "drizzle-orm/postgres-js";
import postgres from "postgres";
import * as schema from "../../../migrations/schema";
import {migrate} from "drizzle-orm/postgres-js/migrator";
if (!process.env.DATABASE_URL) {
    console.log('Cannot find database url')
  }
const client = postgres(process.env.DATABASE_URL as string, {max:1});
const db = drizzle(client, { schema });
const migrateDb = async () => {
    try {
        console.log("🟠 migrating db");
        await migrate(db,{ migrationsFolder : "migrations"});
        console.log("🟢 migrated db");
        
    } catch (error) {
        console.log("🔴 failed to migrate db",error);
    }
}
migrateDb();


export default db;

my app/page.tsx looks like this :

'use client'
import db from '@/lib/supabase/db'


export default function Home() {
console.log(db)
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
     
     hello
    </main>
  )
}

'use client'
import db from '@/lib/supabase/db'


export default function Home() {
console.log(db)
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
     
     hello
    </main>
  )
}

I am getting this error :

 ⨯ node:crypto
Module build failed: UnhandledSchemeError: Reading from "node:crypto" is not handled by plugins (Unhandled scheme).  
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
Import trace for requested module:
node:crypto
./node_modules/drizzle-orm/migrator.js
./node_modules/drizzle-orm/postgres-js/migrator.js
./src/lib/supabase/db.ts
./src/app/page.tsx

 ⨯ node:crypto
Module build failed: UnhandledSchemeError: Reading from "node:crypto" is not handled by plugins (Unhandled scheme).  
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
Import trace for requested module:
node:crypto
./node_modules/drizzle-orm/migrator.js
./node_modules/drizzle-orm/postgres-js/migrator.js
./src/lib/supabase/db.ts
./src/app/page.tsx

i ve been stuck at this for hoursss. can someone check and help me pls. i am using nextjs 13.5.8 if i comment out the migration part of db.ts then It keeps saying that fs ,net , perf_hooks modules are not installed but I've instaleld them like a million times already!

1 Reply

Noahh•7mo ago

This is pretty late (hope you've solved it by now!) but I've been working through this issue recently and just wanted to put my two cents in. It seems like the main problem with your specific instance is that you're trying to use a node module on the clientside (since you import it in a 'use client' component). For you, the first would be as easy as wrapping the client component in a server component that imports the db and passes any information down as props. The unfortunate thing is I'm trying to do this with Next.js' experimental instrumentation and I'm hitting the same issues, which is weird because it should only run on the server... I'll drop back in once I find more It was confusing, but it wasn't nearly as bad as I thought. I couldn't find any documentation for it, but it seems like instrumentation.js|ts runs in the node AND browser context, meaning that importing any node module failed in the browser context. My final solution was this:

if(process.env.NEXT_RUNTIME === 'nodejs') {
    await import('stuff-that-uses-node-modules');
}

if(process.env.NEXT_RUNTIME === 'nodejs') {
    await import('stuff-that-uses-node-modules');
}

Gaming

Programming

Module build failed: UnhandledSchemeError: Reading from "node:crypto" is not handled by plugins