andreww2012 / mongoose-zod

A library which allows to author mongoose ("a MongoDB object modeling tool") schemas using zod ("a TypeScript-first schema declaration and validation library").
MIT License
49 stars 7 forks source link

Strange issue using "z" namespace from mongoose-zod package #18

Closed angelhdzdev closed 7 months ago

angelhdzdev commented 7 months ago

image image

I get this strange issue when using z namespace from mongoose-zod@0.1.2 package. If I use it from zod@3.22.4 package (which is a peer dep of mongoose-zod), it's all good!

This was driving me nuts for 1 day. I was just using a Zod schema as I normally do in a Vue (Nuxt) component to use the parse method to validate the forms.

This is my schema:

import { z as zod } from 'zod'

export const authenticateZodSchema = zod.object({
  email: zod.string().min(1).email(),
  password: zod.string().min(6)
})

export const registerZodSchema = zod.object({
  email: zod.string().min(1).email(),
  password: zod.string().min(6),
  username: zod.string().min(6),
  lastname: zod.string().optional(),
  firstname: zod.string().min(1)

})

Vue component:

<script lang="ts" setup>
import { AuthenticateData } from '~/shared/auth/auth.type'
import { authenticateZodSchema } from '~/shared/auth/auth.zod'
import { ref } from 'vue'
import { useValidation } from '~/utils/validation/use-validation'

const authenticateForm = ref<AuthenticateData>({
  email: '',
  password: ''
})

const validations = useValidation(authenticateZodSchema)
</script>

<template>
  <div class="column q-pa-md">
   <pre>{{validations.email.name}}</pre>
    <span class="text-h6">Authenticate</span>
    <q-form class="q-gutter-md q-mt-md column q-gutter-y-sm">
      <q-input
        filled
        type="email"
        label="Email"
        lazy-rules
        :rules="[]"
        v-model="authenticateForm.email"
      />
      <q-input
        filled
        type="password"
        label="Password"
        lazy-rules
        :rules="[]"
        v-model="authenticateForm.password"
      />
    </q-form>
  </div>
</template>

<style scoped>

</style>

I did a lot of steps based on the assumption it was a mongoose issue, installing mongoose explicitly, reinstalling all deps, deleting .nuxt to generate the types and Vue components from scratch, sigh...

Until I realized the error is only present when using the z namespace from mongoose-zod.

Any info will be appreciated.

angelhdzdev commented 7 months ago

Solved

Read the guide again and noticed the examples use z from zod, not from mongoose-zod. :) nice!

Also, forgot to call setup() so when I would have tested my app at runtime later it would have failed haha🤦‍♂️. I've been only working on it on the types system. But I tested and not calling setup still causes the "strange" mongoose error.