ixartz/Next-js-Boilerplate

Errors with PNPM straight out of the box

john-prutton opened this issue · 7 comments

Thanks for this starter repo! Here's some errors I've found, and some workarounds I can suggest.

Using version 3.21.0 with commit hash ab2ace1.

Missing module: better-sqlite3

When trying to run pnpm db:push, it results in this error:

$ pnpm db:push

> next-js-boilerplate@3.21.0 db:push C:\...\Next-js-Boilerplate
> drizzle-kit push:sqlite

drizzle-kit: v0.19.13
drizzle-orm: v0.28.6

node:internal/modules/cjs/loader:1075
  const err = new Error(message);
              ^

Error: Cannot find module 'better-sqlite3'
Require stack:
- C:\...\Next-js-Boilerplate\node_modules\.pnpm\drizzle-kit@0.19.13\node_modules\drizzle-kit\index.cjs
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at node_modules/.pnpm/@libsql+client@0.1.6/node_modules/@libsql/client/lib-esm/sqlite3.js (C:\...\Next-js-Boilerplate\node_modules\.pnpm\drizzle-kit@0.19.13\node_modules\drizzle-kit\index.cjs:43596:37)
    at __init (C:\...\Next-js-Boilerplate\node_modules\.pnpm\drizzle-kit@0.19.13\node_modules\drizzle-kit\index.cjs:9:56)
    at node_modules/.pnpm/@libsql+client@0.1.6/node_modules/@libsql/client/lib-esm/index.js (C:\...\Next-js-Boilerplate\node_modules\.pnpm\drizzle-kit@0.19.13\node_modules\drizzle-kit\index.cjs:51852:5)
    at __init (C:\...\Next-js-Boilerplate\node_modules\.pnpm\drizzle-kit@0.19.13\node_modules\drizzle-kit\index.cjs:9:56)
    at src/cli/commands/sqliteIntrospect.ts (C:\...\Next-js-Boilerplate\node_modules\.pnpm\drizzle-kit@0.19.13\node_modules\drizzle-kit\index.cjs:51875:5)
    at __init (C:\...\Next-js-Boilerplate\node_modules\.pnpm\drizzle-kit@0.19.13\node_modules\drizzle-kit\index.cjs:9:56) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\\...\\Next-js-Boilerplate\\node_modules\\.pnpm\\drizzle-kit@0.19.13\\node_modules\\drizzle-kit\\index.cjs'
  ]
}

Node.js v18.16.0
 ELIFECYCLE  Command failed with exit code 1.

Solution

I don't know why it requires better-sqlite3, but a simple install does the trick:
pnpm add better-sqlite3

Unloaded environment variables

When running something like pnpm db:push, the drizzle.config.ts file is read. It does not have access to the environment variables by default and you can expect libsql to throw an error for an invalid db url. Quickest way to test:

...,
dbCredentials: {
    url: process.env.DATABASE_URL ?? "hardcode-the-actual-url-here-and-no-error-will-occur",
},

Solution

Use dotenv:

  1. pnpm add dotenv
  2. Add it to files that need env vars, that aren't bootstrapped by Next.js:
// eg. drizzle.config.ts

import "dotenv/config"

Now the env file will be read successfully.

Libsql: Failed To Compile

When running pnpm dev we aren't met with any errors. But once we navigate to /guestbook these errors arise and cause the app to fail to compile:

$ pnpm dev

> next-js-boilerplate@3.21.0 dev C:\...\Next-js-Boilerplate
> next dev

  ▲ Next.js 13.5.3
  - Local:        http://localhost:3000
  - Environments: .env

 ✓ Ready in 3.6s
 ✓ Compiled /src/middleware in 457ms (276 modules)
 ✓ Compiled / in 813ms (285 modules)
 ○ Compiling /guestbook/page ...
 ⨯ ./node_modules/.pnpm/@libsql+client@0.3.5_encoding@0.1.13/node_modules/@libsql/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 (c) 2023 libSQL

Import trace for requested module:
./node_modules/.pnpm/@libsql+client@0.3.5_encoding@0.1.13/node_modules/@libsql/client/LICENSE
./node_modules/.pnpm/libsql@0.1.23/node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ sync ^\.\/.*$     
./node_modules/.pnpm/libsql@0.1.23/node_modules/libsql/index.js
./node_modules/.pnpm/@libsql+client@0.3.5_encoding@0.1.13/node_modules/@libsql/client/lib-esm/sqlite3.js
./node_modules/.pnpm/@libsql+client@0.3.5_encoding@0.1.13/node_modules/@libsql/client/lib-esm/node.js
./src/libs/DB.ts
./src/app/guestbook/page.tsx
 ⨯ ./node_modules/.pnpm/@libsql+client@0.3.5_encoding@0.1.13/node_modules/@libsql/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 (c) 2023 libSQL

Import trace for requested module:
./node_modules/.pnpm/@libsql+client@0.3.5_encoding@0.1.13/node_modules/@libsql/client/LICENSE
./node_modules/.pnpm/libsql@0.1.23/node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ sync ^\.\/.*$     
./node_modules/.pnpm/libsql@0.1.23/node_modules/libsql/index.js
./node_modules/.pnpm/@libsql+client@0.3.5_encoding@0.1.13/node_modules/@libsql/client/lib-esm/sqlite3.js
./node_modules/.pnpm/@libsql+client@0.3.5_encoding@0.1.13/node_modules/@libsql/client/lib-esm/node.js
./src/libs/DB.ts
./src/app/guestbook/page.tsx
 ⨯ ./node_modules/.pnpm/@libsql+client@0.3.5_encoding@0.1.13/node_modules/@libsql/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 (c) 2023 libSQL

Import trace for requested module:
./node_modules/.pnpm/@libsql+client@0.3.5_encoding@0.1.13/node_modules/@libsql/client/LICENSE
./node_modules/.pnpm/libsql@0.1.23/node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ ./node_modules/@libsql/ ./node_modules/.pnpm/node_modules/@libsql/ sync ^\.\/.*$     
./node_modules/.pnpm/libsql@0.1.23/node_modules/libsql/index.js
./node_modules/.pnpm/@libsql+client@0.3.5_encoding@0.1.13/node_modules/@libsql/client/lib-esm/sqlite3.js
./node_modules/.pnpm/@libsql+client@0.3.5_encoding@0.1.13/node_modules/@libsql/client/lib-esm/node.js
./src/libs/DB.ts
./src/app/guestbook/page.tsx

No Solutions Yet

As mentioned in the links below, you should include the following in your Next.js config:

...,
experimental: {
  serverComponentsExternalPackages: ["libsql"]
},

This unfortunately does not resolve the error.

Some helpful links:

Conclusion

These errors occur straight out of the box with this repo and the latest versions of next and @libsql/client:

"drizzle-orm": "^0.28.6",
"next": "^13.5.2",
"@libsql/client": "^0.3.5"

Please let me know if I should split these issues up.

@liquiFruit Thank you for reporting the issue.

The command db:push is not intended to be used as it is. The project already do it automatically with this following line: https://github.com/ixartz/Next-js-Boilerplate/blob/main/src/libs/DB.ts#L16
The command db:push is more a placeholder for someone who want to do it manually. But, it's required them to update the command as you have noticed.

To avoid the confusion, I'll remove the command.

For the last error related to Libsql: Failed To Compile, unfortunately, I'm not able to reproduce. Everything is working for me. Could you be able to share more information? Which OS do you use?

Currently, on my local environment with a clean and fresh project, everything is working perfectly.

@liquiFruit I just remove the db:push command, which is not used out of the box and it can create confusion for new users.

I'm closing this issue since I'm not able to reproduce the error Libsql: Failed To Compile, happy to investigate if you share more information in a new issue.

@liquiFruit I got the same error message and fixed by downgrading it to 0.3.4. However, still no idea why it didn't work with 0.3.5.

Unfortunately, I'm currently not able to reproduce on my local environment with a clean and fresh install.

I'm totally open to feedback and PR. It would be great if someone can find the root cause.

@ixartz @liquiFruit After extensive testing, I noticed that this error occurs when using pnpm. No issues when using yarn or npm. Quick fix: use yarn or npm.

If you're using a Turbo repo (monorepo) like me, add the following to your .npmrc:

public-hoist-pattern[]=*libsql*

Not entirely sure this is the correct solution, but at least it's working for me now.

@linyiru Thank you for taking the time to test and share the information. This is why I don't have the issue, I'm using NPM.

I'm also not sure what is the solution: currently the project focus on NPM, the boilerplate provides the lock file and adapt package.json version for NPM. Today, there are 3 other alternative to NPM (yarn, pnpm and now bun), I don't think it would be viable to provide the lock files and dependencies version for other alternatives.

@ixartz, I agree including the package locks for all major package managers is cumbersome.

I found that using pnpm i --shamefully-hoist fixed this error. Might I propose including an .npmrc entry with shamefully-hoist=true?

I have made a minimal reproduction repo demonstrating the problem with pnpm i here.