Issue with loading zod schemas at runtime

28 Replies

ymc9•12mo 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•12mo ago

Message Not Public

ymc9•12mo 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•12mo ago

Message Not Public

ymc9•12mo 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•12mo ago

next.config.js

ymc9•12mo ago

The "@zenstackhq/runtime" package has to be excluded by the nextjs server components bundler

Unknown User•12mo ago

Message Not Public

ymc9•12mo 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•12mo ago

Message Not Public

ymc9•12mo 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•12mo ago

Hi @afusco , I'm not sure if you're using a similar stack, but the sample 👆🏻 might be useful

Unknown User•12mo ago

Message Not Public

ymc9•12mo 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•12mo ago

Message Not Public

ymc9•12mo ago

Got it. Ya, I believe there's something intricate going on. A repro would be very helpful! Thanks!

Unknown User•10mo ago

Message Not Public

ymc9•10mo 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•10mo ago

Message Not Public

ymc9•10mo ago

Sure. Thank you!

Unknown User•10mo ago

Message Not Public

ymc9•10mo 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•10mo ago

ymc9•10mo ago

I don't see any rules in schema.zmodel referencing "roles" field, but I guess you have plan for the future.

Unknown User•10mo ago

Message Not Public

ymc9•10mo 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•10mo ago

Message Not Public

ymc9•10mo ago

Awesome! Great to know that.

Gaming

Programming

Issue with loading zod schemas at runtime