Issue with loading zod schemas at runtime

28 Replies
ymc9
ymc913mo ago
I've got the invite into the org but there're many repos in it. Could you let me know which one I should look into @markit97212 ?
Unknown User
Unknown User13mo ago
Message Not Public
Sign In & Join Server To View
ymc9
ymc913mo ago
Got it. I’ll look into it and get back to you Just to make sure, I should use "dev" branch, right? I'm still having trouble to get to the point where ZenStack runtime fails ... but here are some observations: 1. I see that you're using next13 app dir, in that case, the "@zenstackhq/runtime" package needs to be excluded from Next.js's RSC bundler. https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsExternalPackages 2. I tried to add the above setting into the ESM version of your next.config.js, but it doesn't seem to be effective. I had to convert it to a CJS to let Next.js pick up the settings. Don't know why ...
/** @type {import('next').NextConfig} */

import smartypants from 'remark-smartypants'
import rehypePrism from 'rehype-prism-plus'
import mdx from '@next/mdx';

// /**
// * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
// * This is especially useful for Docker builds.
// */
// !process.env.SKIP_ENV_VALIDATION && (await import("./src/env/server.mjs"))

const nextConfig = {
webpack: (config, {isServer}) => {
if (!isServer) {
config.resolve.fallback = {
...config.resolve.fallback,
fs: false,
child_process: false,
os: false,
path: false,
net: false,
stream: false,
}
}
return config
},
reactStrictMode: true,
swcMinify: true,
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.unsplash.com',
port: '',
pathname: '',
},
],
domains: ['picsum.photos', 'lh3.googleusercontent.com', 'avatars.githubusercontent.com', 'via.placeholder.com'],
},
experimental: { // https://github.com/vercel/next.js/issues/52876
serverComponentsExternalPackages: ["node-nlp", "@zenstackhq/runtime"],
swcTraceProfiling: true,
},

}
const withMDX = mdx({
extension: /\.mdx?$/,
remarkPlugins: [smartypants],
rehypePlugins: [rehypePrism],
// providerImportSource: "@mdx-js/react",
})

export default withMDX({
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
...nextConfig,
})
/** @type {import('next').NextConfig} */

import smartypants from 'remark-smartypants'
import rehypePrism from 'rehype-prism-plus'
import mdx from '@next/mdx';

// /**
// * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
// * This is especially useful for Docker builds.
// */
// !process.env.SKIP_ENV_VALIDATION && (await import("./src/env/server.mjs"))

const nextConfig = {
webpack: (config, {isServer}) => {
if (!isServer) {
config.resolve.fallback = {
...config.resolve.fallback,
fs: false,
child_process: false,
os: false,
path: false,
net: false,
stream: false,
}
}
return config
},
reactStrictMode: true,
swcMinify: true,
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.unsplash.com',
port: '',
pathname: '',
},
],
domains: ['picsum.photos', 'lh3.googleusercontent.com', 'avatars.githubusercontent.com', 'via.placeholder.com'],
},
experimental: { // https://github.com/vercel/next.js/issues/52876
serverComponentsExternalPackages: ["node-nlp", "@zenstackhq/runtime"],
swcTraceProfiling: true,
},

}
const withMDX = mdx({
extension: /\.mdx?$/,
remarkPlugins: [smartypants],
rehypePlugins: [rehypePrism],
// providerImportSource: "@mdx-js/react",
})

export default withMDX({
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
...nextConfig,
})
After the changes, when I ran "npm run dev" and hit "localhost:3000/signup", I see the following trpc errors:
Cannot read properties of undefined (reading 'parseAsync')
at getParseFn (webpack-internal:///(rsc)/./node_modules/@trpc/server/dist/index.mjs:204:23)
at Object.input (webpack-internal:///(rsc)/./node_modules/@trpc/server/dist/index.mjs:367:28)
at createRouter (webpack-internal:///(rsc)/./src/server/routers/Quiz.router.ts:13:31)
at customRoutes (webpack-internal:///(rsc)/./src/server/routers/Custom.router.tsx:31:74)
at eval (webpack-internal:///(rsc)/./src/server/trpc.ts:73:94)
at (rsc)/./src/server/trpc.ts (/private/tmp/qwapp/.next/server/app/api/trpc/[trpc]/route.js:1552:1)
at __webpack_require__ (/private/tmp/qwapp/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./src/app/api/trpc/[trpc]/route.ts:7:70)
at (rsc)/./src/app/api/trpc/[trpc]/route.ts (/private/tmp/qwapp/.next/server/app/api/trpc/[trpc]/route.js:1182:1)
Cannot read properties of undefined (reading 'parseAsync')
at getParseFn (webpack-internal:///(rsc)/./node_modules/@trpc/server/dist/index.mjs:204:23)
at Object.input (webpack-internal:///(rsc)/./node_modules/@trpc/server/dist/index.mjs:367:28)
at createRouter (webpack-internal:///(rsc)/./src/server/routers/Quiz.router.ts:13:31)
at customRoutes (webpack-internal:///(rsc)/./src/server/routers/Custom.router.tsx:31:74)
at eval (webpack-internal:///(rsc)/./src/server/trpc.ts:73:94)
at (rsc)/./src/server/trpc.ts (/private/tmp/qwapp/.next/server/app/api/trpc/[trpc]/route.js:1552:1)
at __webpack_require__ (/private/tmp/qwapp/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(rsc)/./src/app/api/trpc/[trpc]/route.ts:7:70)
at (rsc)/./src/app/api/trpc/[trpc]/route.ts (/private/tmp/qwapp/.next/server/app/api/trpc/[trpc]/route.js:1182:1)
I figured trpc support is non-official for app dir. Did trpc work in your environment?
Unknown User
Unknown User13mo ago
Message Not Public
Sign In & Join Server To View
ymc9
ymc913mo ago
Hi @markit , I can see the error now. It seems to be related to that "serverComponentsExternalPackages" in "next.config.cjs" is not effective. After changing it to a esm, the problem seems gone. Could you try if you see the same thing by replacing "next.config.cjs" with this file?
ymc9
ymc913mo ago
The "@zenstackhq/runtime" package has to be excluded by the nextjs server components bundler
Unknown User
Unknown User13mo ago
Message Not Public
Sign In & Join Server To View
ymc9
ymc913mo ago
Yes, I ran the app and hit http://localhost:3000/api/trpc/getTodos I saw a different error but not the $Schema undefined anymore I'm working on a separate sample project with nextjs13 + app dir + trpc
Unknown User
Unknown User13mo ago
Message Not Public
Sign In & Join Server To View
ymc9
ymc913mo ago
https://github.com/zenstackhq/sample-blog-nextjs-app-trpc Here you go, it's a blog app made with: - create-t3-app - Next.js 13 app dir - NextAuth - trpc
GitHub
GitHub - zenstackhq/sample-blog-nextjs-app-trpc: Blog Sample Using ...
Blog Sample Using Next.js 13 App Route and TRPC. Contribute to zenstackhq/sample-blog-nextjs-app-trpc development by creating an account on GitHub.
ymc9
ymc913mo ago
Hi @afusco , I'm not sure if you're using a similar stack, but the sample 👆🏻 might be useful
Unknown User
Unknown User13mo ago
Message Not Public
Sign In & Join Server To View
ymc9
ymc913mo ago
Let me include this as a sample to github readme and doc site so more people can find it 😄 I'm so glad you find ZenStack helpful. Yes, good idea, we should reach out to Theo and see if he's interested in including it into t3. It's stable enough now.
Unknown User
Unknown User13mo ago
Message Not Public
Sign In & Join Server To View
ymc9
ymc913mo ago
Got it. Ya, I believe there's something intricate going on. A repro would be very helpful! Thanks!
Unknown User
Unknown User11mo ago
Message Not Public
Sign In & Join Server To View
ymc9
ymc911mo ago
Hi @Alex , we don’t have one yet. Have you already created such a project? I’d be happy to see how I can help.
Unknown User
Unknown User10mo ago
Message Not Public
Sign In & Join Server To View
ymc9
ymc910mo ago
Sure. Thank you!
Unknown User
Unknown User10mo ago
Message Not Public
Sign In & Join Server To View
ymc9
ymc910mo ago
Hi @Alex , I tried running the code and found the authUser passed to enhance call is undefined. If that's the case, the enhanced client will run as anonymous user. I checked Clerk's doc, the response of getAuth() API doesn't include a "user" field. https://clerk.com/docs/references/nextjs/authentication-object Have you checked if it's the same on your side? I'm not an expert with Clerk, but it seems that if you need to access additional metadata in the backend, you need to include them into the session token with a template: https://clerk.com/docs/backend-requests/making/custom-session-tokenhttps://clerk.com/docs/backend-requests/making/custom-session-token
Authentication Object | Clerk
The Authentication object contains information about the current user's session.
ymc9
ymc910mo ago
No description
ymc9
ymc910mo ago
I don't see any rules in schema.zmodel referencing "roles" field, but I guess you have plan for the future.
Unknown User
Unknown User10mo ago
Message Not Public
Sign In & Join Server To View
ymc9
ymc910mo ago
You're welcome. If you only need to check with user id in the policy rules in zmodel, you can simply call enhance like:
enhance(db, { user: { id: auth.userId } });
enhance(db, { user: { id: auth.userId } });
Unknown User
Unknown User10mo ago
Message Not Public
Sign In & Join Server To View
ymc9
ymc910mo ago
Awesome! Great to know that.
Want results from more Discord servers?
Add your server