tursodatabase / libsql-client-ts

TypeScript/JavaScript client API for libSQL
https://docs.turso.tech/sdk/ts/quickstart
MIT License
182 stars 30 forks source link

Webpack issue with next dev and next build #205

Closed ridhwaans closed 1 month ago

ridhwaans commented 1 month ago
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.18/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/.pnpm/libsql@0.3.18/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ sync ^\.\/.*$
../../node_modules/.pnpm/libsql@0.3.18/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
../../packages/db/src/index.ts
../../packages/auth/src/lucia.ts
../../packages/auth/src/index.ts
./src/app/page.tsx

.env.local

DATABASE_URL='file:local.db'

packages/db/src/index.ts

import { drizzle } from 'drizzle-orm/libsql'; 
import { createClient } from '@libsql/client'; 

import { env } from '@repo/env/web';

import * as schema from './schema';

const sql = new createClient(env.DATABASE_URL);

export const db = drizzle(sql, {
  schema,
  logger: env.NODE_ENV === 'development',
});

package.json deps

...
dependencies": {
    "@libsql/client": "^0.6.0",
    "drizzle-orm": "^0.30.10",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "drizzle-kit": "^0.21.1",
  ...

apps/web/next.config.js

import { fileURLToPath } from 'node:url';

import createJiti from 'jiti';

const jiti = createJiti(fileURLToPath(import.meta.url));

jiti('@orbitkit/env/web');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    typedRoutes: true,
    serverComponentsExternalPackages: ["drizzle-orm", "@libsql/client"]
  }
};

export default nextConfig;

running next dev or build in production mode results in

> next dev

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000
  - Environments: .env.local
  - Experiments (use with caution):
    · typedRoutes

 ✓ Starting...
 ✓ Ready in 2.5s
 ○ Compiling /_not-found ...
 ⨯ ../../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.18/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/.pnpm/libsql@0.3.18/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ sync ^\.\/.*$
../../node_modules/.pnpm/libsql@0.3.18/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
../../packages/db/src/index.ts

EDIT the following loader in next.config.js parses README and LICENSE but fails at node:

/** @type {import('next').NextConfig} */
const nextConfig = {
...
webpack: (config) => {
    config.module.rules.push({
      test: /\.mdx?/i,
      use: [
        {
          loader: 'html-loader',
          options: {
            esModule: true,
          }
        },
        {
          loader: "markdown-loader"
        }
      ]},{
      test: /LICENSE/,
      use: [
          {
              loader: 'file-loader' }]
    })

    return config
},
};

export default nextConfig;

err

 ⨯ ../../node_modules/.pnpm/@libsql+linux-x64-gnu@0.3.18/node_modules/@libsql/linux-x64-gnu/index.node
Module parse failed: Unexpected character '' (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
(Source code omitted for this binary file)

Import trace for requested module:
../../node_modules/.pnpm/@libsql+linux-x64-gnu@0.3.18/node_modules/@libsql/linux-x64-gnu/index.node
../../node_modules/.pnpm/libsql@0.3.18/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/.pnpm/libsql@0.3.18/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ ../../node_modules/.pnpm/node_modules/@libsql/ sync ^\.\/.*$

related: https://github.com/tursodatabase/libsql/issues/1276 https://github.com/vitejs/vite/discussions/15802

ridhwaans commented 1 month ago

Workaround is to reinstall @libsql/client in the nextjs app doing the webpack bundle. It still has to be dependency only in the workspace app housing the client code, in a monorepo scenario