Z
ZenStack

❓-help

Issue with loading zod schemas at runtime

UUUnknown User
View on Discord
10/26/2023
Message Not Public
Sign In & Join Server To View
Yymc9
View on Discord
10/26/2023
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 ?
UUUnknown User
View on Discord
10/26/2023
3 Messages Not Public
Sign In & Join Server To View
Yymc9
View on Discord
10/26/2023
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?
UUUnknown User
View on Discord
10/26/2023
11 Messages Not Public
Sign In & Join Server To View
Yymc9
View on Discord
10/27/2023
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?
Yymc9
View on Discord
10/27/2023
Yymc9
View on Discord
10/27/2023
The "@zenstackhq/runtime" package has to be excluded by the nextjs server components bundler
UUUnknown User
View on Discord
10/27/2023
2 Messages Not Public
Sign In & Join Server To View
Yymc9
View on Discord
10/27/2023
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
UUUnknown User
View on Discord
10/27/2023
2 Messages Not Public
Sign In & Join Server To View
Yymc9
View on Discord
10/27/2023
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 Hi @afusco , I'm not sure if you're using a similar stack, but the sample 👆🏻 might be useful
UUUnknown User
View on Discord
10/27/2023
3 Messages Not Public
Sign In & Join Server To View
Yymc9
View on Discord
10/27/2023
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.
UUUnknown User
View on Discord
10/27/2023
Message Not Public
Sign In & Join Server To View
Yymc9
View on Discord
10/27/2023
Got it. Ya, I believe there's something intricate going on. A repro would be very helpful! Thanks!

Looking for more? Join the community!

Z
ZenStack

❓-help

Join Server
Want results from more Discord servers?
Add your server