Cannot import $lib/server/db.ts into client-side code

I have a fresh install of sveltekit using npm create svelte@latest my-app

and after doing npm install, I added npm install pg to get postgres working. I created a database called todos and a table called items;

In the svelte codebase under src:

routes/+page.ts:

import { getList } from "$lib/server/db";
export async function load() {
    const list = await getList()
    return {
        test: JSON.stringify(list)
    };
}

routes/+page.svelte:

<script lang="ts">
	export let data: { test: string };
</script>

{data.test}

lib/server/db.ts:

import { Client } from 'pg';
const client = new Client({ 'database': 'todos' })
await client.connect()
export async function getList() {
    return await client.query('select * from items')
}

When I try to load the page I get this error in the terminal and the browser:

[vite] Internal server error: Cannot import $lib/server/db.ts into client-side code

On the browser I can click outside of the message to dismiss it, and I end up getting the output to print as expected.

Am I doing something wrong with my setup?

I suspect you want this code to be run on the backend side only. For this, you just need to rename your +page.ts into +page.server.ts.

Take a look at the Universal vs server section in their documentation.

Just renaming the typescript file should be enough to get it working. You don't need to change the svelte file.

If you actually want to connect to the DB from the frontend, then you will need to connect via API calls.

--- Update ---

In addition to this, I think you stumbled into the server modules protection. Basically, SvelteKit understands that anything you place under $lib/server is meant to be used on the server side only so it will automatically prevent any usage on client code.