I’m working on a Next.js application that currently uses Neon Database and Drizzle ORM for data management. I’m interested in switching to Supabase due to its broader feature set. However, I’ve encountered several errors and challenges during the migration process.

I’m migrating a Next.js application (v14.1.3) using Drizzle ORM (v^0.30.2) from Neon Database to Supabase.

Steps Taken:

1. Updated the database URL in my .env file.
2. Modified db/drizzle.ts to use Supabase with the following code:

import { drizzle } from 'drizzle-orm/postgres-js'
import postgres from 'postgres'
import * as schema from "./schema"

const connectionString = process.env.DATABASE_URL as string;

const client = postgres(connectionString, {max: 1})

const db = drizzle(client, {schema});

export default db;

Problem 1

The above changes resulted in the following error:

⨯ cloudflare:sockets

Module build failed: UnhandledSchemeError: Reading from "cloudflare:sockets" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "cloudflare:" URIs.

Import trace for requested module:
cloudflare:sockets
./node_modules/postgres/cf/polyfills.js
./node_modules/postgres/cf/src/index.js
./db/drizzle.ts
./lib/auth.ts

Solution

I was able to resolve the issue by adding an IgnorePlugin to the Next.js configuration (next.config.mjs):

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { webpack }) => {
    config.plugins.push(new webpack.IgnorePlugin({
      resourceRegExp: /^pg-native$|^cloudflare:sockets$/,
    }));

    return config;
  },
  // ... other Next.js configuration
};

export default nextConfig;

I don’t know if I’ve missed something, but now I’m getting a new error:

node:stream

Module build failed: UnhandledSchemeError: Reading from "node:stream" 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.