Sheng•4w ago

Convex functions should not be imported in the browser.

I facing this error: Convex functions should not be imported in the browser. This will throw an error in future versions of convex. If this is a false negative, please report it to Convex support. I didn't directly import the mutation function from convex folder to frontend there, Im using the api + useMutation Here is my code in convex:

import { zid } from "convex-helpers/server/zod"
import { ConvexError } from "convex/values"
import z from "zod"

import { userSchema } from "@cvx/users/schemas"
import { authMutation } from "@cvx/utils/function"

export const createUserSchema = userSchema
  .pick({
    email: true,
    isAdmin: true,
  })
  .extend({
    isAdmin: z.boolean(),
  })

export const createUser = authMutation({
  args: createUserSchema.shape,
  handler: async (ctx, args) => {
    const { email, isAdmin } = args

    const existingUser = await ctx.db
      .query("users")
      .withIndex("by_email", (q) => q.eq("email", email))
      .unique()

    if (existingUser) throw new ConvexError("User already exists")

    const newUser = userSchema.parse({
      email,
      isActive: true,
      isAdmin,
    })

    return ctx.db.insert("users", newUser)
  },
})

import { zid } from "convex-helpers/server/zod"
import { ConvexError } from "convex/values"
import z from "zod"

import { userSchema } from "@cvx/users/schemas"
import { authMutation } from "@cvx/utils/function"

export const createUserSchema = userSchema
  .pick({
    email: true,
    isAdmin: true,
  })
  .extend({
    isAdmin: z.boolean(),
  })

export const createUser = authMutation({
  args: createUserSchema.shape,
  handler: async (ctx, args) => {
    const { email, isAdmin } = args

    const existingUser = await ctx.db
      .query("users")
      .withIndex("by_email", (q) => q.eq("email", email))
      .unique()

    if (existingUser) throw new ConvexError("User already exists")

    const newUser = userSchema.parse({
      email,
      isActive: true,
      isAdmin,
    })

    return ctx.db.insert("users", newUser)
  },
})

Then the frontend code use like this:

import { api } from "@cvx/_generated/api"
import { createUserSchema } from "@cvx/users/mutations"

type formSchema = z.infer<typeof createUserSchema>

const AddNewUser = () => {
  const createUser = useMutation(api.users.mutations.createUser)

  const defaultValues: formSchema = {
    email: "",
    isAdmin: false,
  }

  const form = useForm<formSchema>({
    resolver: zodResolver(createUserSchema),
    defaultValues,
  })

...

import { api } from "@cvx/_generated/api"
import { createUserSchema } from "@cvx/users/mutations"

type formSchema = z.infer<typeof createUserSchema>

const AddNewUser = () => {
  const createUser = useMutation(api.users.mutations.createUser)

  const defaultValues: formSchema = {
    email: "",
    isAdmin: false,
  }

  const form = useForm<formSchema>({
    resolver: zodResolver(createUserSchema),
    defaultValues,
  })

...

2 Replies

Convex Bot•4w ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

erquhart•4w ago

Move createUserSchema outside of Convex to resolve this. Best practice is to move any code that is shared between convex code an non-convex code outside of the convex directory.

Convex functions should not be imported in the browser.

Did you find this page helpful?