Webpack issue with next dev and next build
ridhwaans opened this issue · comments
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 ^\.\/.*$
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