Next compiler/webpack parsing @libsql node_module and its MarkDown files.

Question

Next compiler/webpack parsing @libsql node_module and its MarkDown files.

vhespanha opened this issue 3 months ago · comments

When trying to build my next.js project i got an error from webpack, it seems that it is trying to parse files from node_modules, more specifically from libsql Here is the file i think might be causing the issue, but they were working fine before i introduced some react components to the project.

import { drizzle } from 'drizzle-orm/libsql';
import { createClient } from '@libsql/client';
import { env } from '@/env';
import * as schema from './schema';

const turso = createClient({
url: env.DATABASE_URL,
authToken: env.TURSO_AUTH_TOKEN,
});

export const db = drizzle(turso, { schema });

Additional information

vinicius@slvrsrc main* ~/Projects/kuuki
> pnpm run build

> kuuki@0.1.0 build /home/vinicius/Projects/kuuki
> next build

   ▲ Next.js 14.1.4
   - Environments: .env

   Creating an optimized production build ...
Failed to compile.

./node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/README.md
Module parse failed: Unexpected token (1:0)
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
> <p align="center">
|   <a href="https://docs.turso.tech/sdk/ts/quickstart">
|     <img alt="Turso + TypeScript" src="https://github.com/tursodatabase/libsql-client-ts/assets/950181/5d3a2693-75f9-4c56-9107-8ccaa96785fd" width="1000">

Import trace for requested module:
./node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/README.md
./node_modules/.pnpm/libsql@0.3.10/node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/.pnpm/libsql@0.3.10/node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ sync ^\.\/.*$
./node_modules/.pnpm/libsql@0.3.10/node_modules/libsql/index.js
./node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/lib-esm/sqlite3.js
./node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/lib-esm/node.js
./src/server/db/index.ts
./src/server/auth.ts
./src/app/_components/SessionButton.tsx
./src/app/_components/Header.tsx

./node_modules/.pnpm/@libsql+hrana-client@0.6.0/node_modules/@libsql/hrana-client/LICENSE
Module parse failed: Unexpected token (1:4)
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
> MIT License
|
| Copyright 2023 the sqld authors

Import trace for requested module:
./node_modules/.pnpm/@libsql+hrana-client@0.6.0/node_modules/@libsql/hrana-client/LICENSE
./node_modules/.pnpm/libsql@0.3.10/node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/.pnpm/libsql@0.3.10/node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ sync ^\.\/.*$
./node_modules/.pnpm/libsql@0.3.10/node_modules/libsql/index.js
./node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/lib-esm/sqlite3.js
./node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/lib-esm/node.js
./src/server/db/index.ts
./src/server/auth.ts
./src/app/_components/SessionButton.tsx
./src/app/_components/Header.tsx

./node_modules/.pnpm/@libsql+hrana-client@0.6.0/node_modules/@libsql/hrana-client/README.md
Module parse failed: Unexpected character ' ' (1:1)
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
> # Hrana client for TypeScript
|
| **[API docs][docs] | [Github][github] | [npm][npm]**

Import trace for requested module:
./node_modules/.pnpm/@libsql+hrana-client@0.6.0/node_modules/@libsql/hrana-client/README.md
./node_modules/.pnpm/libsql@0.3.10/node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/.pnpm/libsql@0.3.10/node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ sync ^\.\/.*$
./node_modules/.pnpm/libsql@0.3.10/node_modules/libsql/index.js
./node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/lib-esm/sqlite3.js
./node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/lib-esm/node.js
./src/server/db/index.ts
./src/server/auth.ts
./src/app/_components/SessionButton.tsx
./src/app/_components/Header.tsx

./node_modules/.pnpm/@libsql+isomorphic-fetch@0.2.1/node_modules/@libsql/isomorphic-fetch/README.md
Module parse failed: Unexpected character ' ' (1:1)
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
> # `@libsql/isomorphic-fetch`
|
| This package provides `fetch()` on Node (using `node-fetch`) and in Deno and Cloudflare Workers (using the native `fetch()`). Supports both CommonJS and ES modules.

Import trace for requested module:
./node_modules/.pnpm/@libsql+isomorphic-fetch@0.2.1/node_modules/@libsql/isomorphic-fetch/README.md
./node_modules/.pnpm/libsql@0.3.10/node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/.pnpm/libsql@0.3.10/node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ sync ^\.\/.*$
./node_modules/.pnpm/libsql@0.3.10/node_modules/libsql/index.js
./node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/lib-esm/sqlite3.js
./node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/lib-esm/node.js
./src/server/db/index.ts
./src/server/auth.ts
./src/app/_components/SessionButton.tsx
./src/app/_components/Header.tsx

./node_modules/.pnpm/@libsql+isomorphic-ws@0.1.5/node_modules/@libsql/isomorphic-ws/README.md
Module parse failed: Unexpected character ' ' (1:1)
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
> # `@libsql/isomorphic-ws`
|
| This package provides `WebSocket` on Node (using `ws`) and in Deno and Cloudflare Workers (using the native `WebSocket`). Supports both CommonJS and ES modules.

Import trace for requested module:
./node_modules/.pnpm/@libsql+isomorphic-ws@0.1.5/node_modules/@libsql/isomorphic-ws/README.md
./node_modules/.pnpm/libsql@0.3.10/node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/.pnpm/libsql@0.3.10/node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ sync ^\.\/.*$
./node_modules/.pnpm/libsql@0.3.10/node_modules/libsql/index.js
./node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/lib-esm/sqlite3.js
./node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/lib-esm/node.js
./src/server/db/index.ts
./src/server/auth.ts
./src/app/_components/SessionButton.tsx
./src/app/_components/Header.tsx


> Build failed because of webpack errors
 ELIFECYCLE  Command failed with exit code 1.

Jack Grebenc · Answer 1 · Wed Apr 10 2024 05:17:24 GMT+0800 (China Standard Time)

+1 - Experiencing the same issue trying to use this Turso package in my Next.js project

James Edmonds · Answer 2 · Thu Apr 11 2024 10:24:35 GMT+0800 (China Standard Time)

Also experiencing this issue

Alex Ott · Answer 3 · Fri Apr 12 2024 00:39:02 GMT+0800 (China Standard Time)

+1

I think the regex ./node_modules/@libsql/ ./node_modules/@libsql/ sync ^\.\/.*$ is catching the .md file and trying to parse it as something that isn't markdown

Josh Daniel Bañares · Answer 4 · Wed Apr 17 2024 14:14:10 GMT+0800 (China Standard Time)

+1, I'm on a monorepo setup with turborepo

Drizzle ORM setup with Turso in packages/db

import "dotenv/config";
import { drizzle } from "drizzle-orm/libsql";
import { createClient } from "@libsql/client";

const client = createClient({
  url: process.env.TURSO_CONNECTION_URL!,
  authToken: process.env.TURSO_AUTH_TOKEN!,
});

export const db = drizzle(client);

When I import db to page.tsx in apps/web, I get the error:

web:dev: Module parse failed: Unexpected token (1:0)
web:dev: 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:dev: > <p align="center">
web:dev: |   <a href="https://docs.turso.tech/sdk/ts/quickstart">
web:dev: |     <img alt="Turso + TypeScript" src="https://github.com/tursodatabase/libsql-client-ts/assets/950181/5d3a2693-75f9-4c56-9107-8ccaa96785fd" width="1000">
web:dev:
web:dev: Import trace for requested module:
web:dev: ../../node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/README.md
web:dev: ../../node_modules/.pnpm/libsql@0.3.12/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/.pnpm/libsql@0.3.12/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ sync ^\.\/.*$
web:dev: ../../node_modules/.pnpm/libsql@0.3.12/node_modules/libsql/index.js
web:dev: ../../node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/lib-esm/sqlite3.js
web:dev: ../../node_modules/.pnpm/@libsql+client@0.6.0/node_modules/@libsql/client/lib-esm/node.js
web:dev: ../../packages/db/index.ts
web:dev: ./src/app/page.tsx

  async function addUser () {
    "use server";

    await db.insert(users).values({
      id: nanoid(),
      name: "John Doe",
      email: "john@doe.com",
    });
  };

Josh Daniel Bañares · Answer 5 · Fri Apr 19 2024 11:45:04 GMT+0800 (China Standard Time)

Update: I fixed it by instantiating drizzle on the Next.js project instead of exporting the setup in packages/db.

Before

// packages/db/index.ts

import "dotenv/config";
import { drizzle } from "drizzle-orm/libsql";
import { createClient } from "@libsql/client";

const client = createClient({
  url: process.env.TURSO_CONNECTION_URL!,
  authToken: process.env.TURSO_AUTH_TOKEN!,
});

export const db = drizzle(client);

After

// packages/db/index.ts

export * as schema from './schema'
export * from 'drizzle-orm/libsql'

// apps/web/src/lib/drizzle.ts

import 'dotenv/config';
import { drizzle, schema } from '@project/db';
import { createClient } from '@libsql/client';

const client = createClient({
  url: process.env.TURSO_CONNECTION_URL!,
  authToken: process.env.TURSO_AUTH_TOKEN!,
});

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