[BUG]: Drizzle orm + libsql (turso) does not build with NextJS

[thibaultleouay]

What version of drizzle-orm are you using?

0.35.2

What version of drizzle-kit are you using?

0.26.2

Describe the Bug

I'm trying to upgrade to latest drizzle

openstatusHQ/openstatus#1048

But Build does not work either locally or on Vercel

It works if i'm downgrading to 0.34.1

tursodatabase/libsql-client-ts#274

web:build: ./src/app/api/internal/email/route.ts
web:build: 
web:build: ../../node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@libsql/hrana-client/README.md
web:build: Module parse failed: Unexpected character ' ' (1:1)
web:build: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
web:build: > # Hrana client for TypeScript
web:build: | 
web:build: | **[API docs][docs] | [Github][github] | [npm][npm]**
web:build: 
web:build: Import trace for requested module:
web:build: ../../node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@libsql/hrana-client/README.md
web:build: ../../node_modules/.pnpm/[email protected]/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/.pnpm/[email protected]/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ sync ^\.\/.*$
web:build: ../../node_modules/.pnpm/[email protected]/node_modules/libsql/index.js
web:build: ../../node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@libsql/client/lib-esm/sqlite3.js
web:build: ../../node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@libsql/client/lib-esm/node.js
web:build: ../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_bufferutil@4._6rfcxepeppgr4zskuxtuafgphe/node_modules/drizzle-orm/libsql/driver.js
web:build: ../../node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_bufferutil@4._6rfcxepeppgr4zskuxtuafgphe/node_modules/drizzle-orm/libsql/index.js
web:build: ../../packages/db/src/db.ts
web:build: ./src/app/status-page/[domain]/_components/actions.ts
web:build: 
web:build: 
web:build: > Build failed because of webpack errors
web:build:  ELIFECYCLE  Command failed with exit code 1.

Expected behavior

No response

Environment & setup

No response

[AndriiSherman]

Hey, thanks for your report!

We pulled your repo and tried to reproduce the issue to find the cause. The problem lies with the /web import of libsql and webpack, while we are using the libsql client in drizzle driver implementation. The issue is that while esbuild bundles everything as expected, webpack does not, and we don’t have many options to address this. Therefore, we’ve decided to add a few more drivers to Drizzle specifically for web, wasm, etc.

We’ll need a few days to implement this, update the documentation, and get back to you

[KubaJastrz]

I have a similar problem with Remix+Vite. Adding this to the vite.config.ts solves the problem temporarily:

import { defineConfig } from "vite";

export default defineConfig({
	// ...
  	resolve: {
		alias: [
			{
				find: /^@libsql\/client$/,
				replacement: "@libsql/client/http",
			},
		],
	},
});

[AndriiSherman]

please try [email protected]- https://github.com/drizzle-team/drizzle-orm/releases/tag/0.35.3

you can use import { drizzle } from "drizzle-orm/libsql/web" in your case

[thibaultleouay]

It worked ! 🙏