mattddean / t3-app-router-edge-drizzle Goto Github PK

Want to show another way to do data fetching in Next.js 13: streaming a server component to the client after the initial page has been sent.

Steps to reproduce:

• Node 19.5, Windows 11 pnpm version: 8.5.1
• SSL connection fix: appended ssl={"rejectUnauthorized":true}' to DB_URL
• Execute db:push: tables created successfully
• Execute pnpm dev
• Error message in terminal:

[email protected] dev D:\nextjs\t3-app-router-edge-drizzle
next dev

• ready started server on 0.0.0.0:3000, url: http://localhost:3000

• info Loaded env from D:\nextjs\t3-app-router-edge-drizzle.env

• warn You have enabled experimental feature (typedRoutes) in next.config.js.

• warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

• event compiled client and server successfully in 773 ms (311 modules)

• wait compiling...

• event compiled client and server successfully in 197 ms (311 modules)

• wait compiling /page (client and server)...

• event compiled client and server successfully in 9.4s (3685 modules)
  [TRPCError: Invalid base URL: https://] {
  code: 'INTERNAL_SERVER_ERROR',
  name: 'TRPCError'
  }

• error TypeError: Invalid base URL: https://
  at new URLImpl (evalmachine.:2825:19)
  at exports.setup (evalmachine.:3037:16)
  at new URL (evalmachine.:3091:26)
  at Generator.next ()
  at new Promise ()

• error TypeError: Invalid base URL: https://
  at new URLImpl (evalmachine.:2825:19)
  at exports.setup (evalmachine.:3037:16)
  at new URL (evalmachine.:3091:26)
  at Generator.next ()
  at new Promise ()
  digest: "3593854675"

Steps done to try resolve:

• upgraded to Next 13.4.1

• run pnpm dev again

• got cleaner error message:

• ready started server on 0.0.0.0:3000, url: http://localhost:3000

• info Loaded env from D:\nextjs\t3-app-router-edge-drizzle.env

• warn You have enabled experimental feature (typedRoutes) in next.config.js.

• warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

• event compiled client and server successfully in 802 ms (306 modules)

• wait compiling...

• event compiled client and server successfully in 239 ms (306 modules)

• wait compiling /page (client and server)...

• event compiled client and server successfully in 10.2s (3688 modules)

• wait compiling...

• event compiled successfully in 3.9s (1729 modules)
  [TRPCError: Invalid base URL: https://] {
  code: 'INTERNAL_SERVER_ERROR',
  name: 'TRPCError'
  }

• error TypeError: Invalid base URL: https://
  at new URLImpl (evalmachine.:2825:19)
  at exports.setup (evalmachine.:3037:16)
  at new URL (evalmachine.:3091:26)
  at Generator.next ()
  at new Promise ()

• error TypeError: Invalid base URL: https://
  at new URLImpl (evalmachine.:2825:19)
  at exports.setup (evalmachine.:3037:16)
  at new URL (evalmachine.:3091:26)
  at Generator.next ()
  at new Promise ()
  digest: "3593854675"
  [TRPCError: Invalid base URL: https://] {
  code: 'INTERNAL_SERVER_ERROR',
  name: 'TRPCError'
  }

In the browser we:
Unhandled Runtime Error

Error: Invalid base URL: https://
Call Stack
new URLImpl
evalmachine. (2825:19)
exports.setup
evalmachine. (3037:16)
new URL
evalmachine. (3091:26)
Connection.execute
node_modules.pnpm@[email protected]\node_modules@planetscale\database\dist\index.js (72:20)
execute
node_modules.pnpm\drizzle-orm@0.23.2-ec4bb7f_@planetscale[email protected]\node_modules\drizzle-orm\planetscale-serverless\session.js (36:39)
Generator.next

next
node_modules.pnpm\drizzle-orm@0.23.2-ec4bb7f_@planetscale[email protected]\node_modules\drizzle-orm\planetscale-serverless\session.js (8:70)
new Promise

_awaiter
node_modules.pnpm\[email protected]@planetscale[email protected]\node_modules\drizzle-orm\planetscale-serverless\session.js (4:11)
_awaiter
node_modules.pnpm\[email protected]@planetscale[email protected]\node_modules\drizzle-orm\planetscale-serverless\session.js (29:15)

Hope this help in resolving the issue

Error message:

pnpm db:push

[email protected] db:push D:\nextjs\t3-app-router-edge-drizzle
pnpm drizzle-kit push:mysql
drizzle-kit: v0.17.1
drizzle-orm: v0.23.2-ec4bb7f

No config path provided, using default 'drizzle.config.ts'
Reading config file 'D:\nextjs\t3-app-router-edge-drizzle\drizzle.config.ts'
D:\nextjs\t3-app-router-edge-drizzle\node_modules.pnpm\[email protected]\node_modules\drizzle-kit\index.js:43677
const createConnectionErr = new Error();
^

Error: unknown error: Code: UNAVAILABLE
server does not allow insecure connections, client must use SSL/TLS

Resolved by appending "ssl={"rejectUnauthorized":true}" to the DATABASE_URL
Worked for me

This project is on tRPC 10, but not the newest version thereof.

Update query key generation to match how the newest version of tRPC works so that server state dehydration and client hydration of that state continue to match.

If we only update the tRPC packages, and don't update the @trpc/next-layout client's query keys to match, the server and client query keys will not match and the client will ignore the react-query cache state provided by the server.

After following the steps in README.md
When I did pnpm run dev, It showed the following error

pnpm drizle-kit push:mysql was successful and I got [✓] Changes applied

I tried building the application with pnpm run build and It also failed with the error:

node:crypto
Module build failed: UnhandledSchemeError: Reading from "node:crypto" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
    at /home/soodit/Documents/dev/oren/oren-clone/drijjle/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/webpack/bundle5.js:28:395974
    at Hook.eval [as callAsync] (eval at create (/home/soodit/Documents/dev/oren/oren-clone/drijjle/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/soodit/Documents/dev/oren/oren-clone/drijjle/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/webpack/bundle5.js:13:25925)
    at Object.processResource (/home/soodit/Documents/dev/oren/oren-clone/drijjle/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/webpack/bundle5.js:28:395899)
    at processResource (/home/soodit/Documents/dev/oren/oren-clone/drijjle/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5308)
    at iteratePitchingLoaders (/home/soodit/Documents/dev/oren/oren-clone/drijjle/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4667)
    at runLoaders (/home/soodit/Documents/dev/oren/oren-clone/drijjle/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:8590)
    at NormalModule._doBuild (/home/soodit/Documents/dev/oren/oren-clone/drijjle/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/webpack/bundle5.js:28:395761)
    at NormalModule.build (/home/soodit/Documents/dev/oren/oren-clone/drijjle/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/webpack/bundle5.js:28:397789)
    at /home/soodit/Documents/dev/oren/oren-clone/drijjle/node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/webpack/bundle5.js:28:81243

Import trace for requested module:
node:crypto
./node_modules/.pnpm/@[email protected]/node_modules/@noble/hashes/esm/cryptoNode.js
./node_modules/.pnpm/@[email protected]/node_modules/@noble/hashes/esm/utils.js
./node_modules/.pnpm/@[email protected]/node_modules/@noble/hashes/esm/sha3.js
./node_modules/.pnpm/@[email protected]/node_modules/@paralleldrive/cuid2/src/index.js
./node_modules/.pnpm/@[email protected]/node_modules/@paralleldrive/cuid2/index.js
./src/auth/adapters/drizzle-orm.ts
./src/auth/options.ts
./src/app/api/auth/[...nextauth]/route.ts
./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&page=%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&pagePath=private-next-app-dir%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute.ts&appDir=%2Fhome%2Fsoodit%2FDocuments%2Fdev%2Foren%2Foren-clone%2Fdrijjle%2Fsrc%2Fapp&appPaths=%2Fapi%2Fauth%2F%5B...nextauth%5D%2Froute&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&assetPrefix=&nextConfigOutput=!./src/app/api/auth/[...nextauth]/route.ts?__edge_ssr_entry__


Build failed because of webpack errors
info  - Creating an optimized production build . ELIFECYCLE  Command failed with exit code 1.