Drizzle Team•2y ago

Sveltekit Failed to resolve import "cloudflare:sockets"

I was trying to use drizzle orm in a sveltekit project with postgres run in a docker container, but i'm having the following error

[plugin:vite:import-analysis] Failed to resolve import "cloudflare:sockets" from "node_modules\.vite\deps\chunk-JJ5CRB2A.js?v=dcae3c33". Does the file exist?
F:/Python/jira-clon-2/node_modules/.vite/deps/chunk-JJ5CRB2A.js:2908:44
2906|              this.once("connect", connectListener);
2907|            const options = this.ssl ? { secureTransport: "starttls" } : {};
2908|            const { connect } = await import("cloudflare:sockets");
   |                                             ^
2909|            this._cfSocket = connect(`${host}:${port}`, options);
2910|            this._cfWriter = this._cfSocket.writable.getWriter();

[plugin:vite:import-analysis] Failed to resolve import "cloudflare:sockets" from "node_modules\.vite\deps\chunk-JJ5CRB2A.js?v=dcae3c33". Does the file exist?
F:/Python/jira-clon-2/node_modules/.vite/deps/chunk-JJ5CRB2A.js:2908:44
2906|              this.once("connect", connectListener);
2907|            const options = this.ssl ? { secureTransport: "starttls" } : {};
2908|            const { connect } = await import("cloudflare:sockets");
   |                                             ^
2909|            this._cfSocket = connect(`${host}:${port}`, options);
2910|            this._cfWriter = this._cfSocket.writable.getWriter();

4 Replies

Lautaro_dapinOP•2y ago

The project is only a svelkite project template with the following changes

// routes/+page.ts
import type { PageLoad } from "./$types";
import { db } from "$lib/drizzle"

export const load: PageLoad = ({ fetch }) 
    return { hola: "mundo" }
}

// routes/+page.ts
import type { PageLoad } from "./$types";
import { db } from "$lib/drizzle"

export const load: PageLoad = ({ fetch }) 
    return { hola: "mundo" }
}

// lib/drizzle.ts
import { pgTable, serial, text, varchar, integer } from "drizzle-orm/pg-core";
import { drizzle } from "drizzle-orm/node-postgres"
import { Pool } from "pg"
import { migrate } from "drizzle-orm/node-postgres/migrator"

export const kanbanColumns = pgTable('kanban_columns', {
    id: serial('id').primaryKey(),
    name: text('name').notNull(),
    order: integer('order').notNull().default(0),
})

export const kanbanTickets = pgTable('kanban_tickets', {
    id: serial('id').primaryKey(),
    title: text('name').notNull(),
    order: integer('order').notNull().default(0),
    columnId: integer('column_id').references(() => kanbanColumns.id)
})

const sqlite = new Pool({
    host: '127.0.0.1',
    port: 5450,
    user: "postgres",
    password: "example",

})
export const db = drizzle(sqlite);


migrate(db, { migrationsFolder: "migrations" });

// lib/drizzle.ts
import { pgTable, serial, text, varchar, integer } from "drizzle-orm/pg-core";
import { drizzle } from "drizzle-orm/node-postgres"
import { Pool } from "pg"
import { migrate } from "drizzle-orm/node-postgres/migrator"

export const kanbanColumns = pgTable('kanban_columns', {
    id: serial('id').primaryKey(),
    name: text('name').notNull(),
    order: integer('order').notNull().default(0),
})

export const kanbanTickets = pgTable('kanban_tickets', {
    id: serial('id').primaryKey(),
    title: text('name').notNull(),
    order: integer('order').notNull().default(0),
    columnId: integer('column_id').references(() => kanbanColumns.id)
})

const sqlite = new Pool({
    host: '127.0.0.1',
    port: 5450,
    user: "postgres",
    password: "example",

})
export const db = drizzle(sqlite);


migrate(db, { migrationsFolder: "migrations" });

couldnt figure up what was happening, I event add the cloudflare adaptor to the sveltekit.config.ts

// import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-cloudflare';

import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),

    kit: {
        adapter: adapter(),
    }
};

export default config;

// import adapter from '@sveltejs/adapter-auto';
import adapter from '@sveltejs/adapter-cloudflare';

import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),

    kit: {
        adapter: adapter(),
    }
};

export default config;

Maston•2y ago

its because of the "pg" package, imo i would just use postgres-js (https://www.npmjs.com/package/postgres) and not worry about that

npm

postgres

Fastest full featured PostgreSQL client for Node.js. Latest version: 3.3.5, last published: 6 days ago. Start using postgres in your project by running npm i postgres. There are 112 other projects in the npm registry using postgres.

Maston•2y ago

if you want to look into actually fixing your problem and still use pg, its because "pg" dynamically imports "pg-cloudflare", which itself dynamically imports "cloudflare:sockets", so youre trying to bundle these packages and gives you that error when you can't find them, even if they're not needed.

export default defineConfig({
  // ...
  build: {
    rollupOptions: { external: ['pg-cloudflare'] },
  }
});

export default defineConfig({
  // ...
  build: {
    rollupOptions: { external: ['pg-cloudflare'] },
  }
});

maybe this fixes it in your vite config, altho i wouldn't bother and would just move to postgres-js

Lautaro_dapinOP•2y ago

I will try that thanks @Maston lool, i'm so stupid, i was putting the load function in the server/cliennt instead of the page.server.ts xD

Gaming

Programming

Sveltekit Failed to resolve import "cloudflare:sockets"