Despite the fact that I wrap convexProvide in my layout page still seeing an error which says:
ERROR:
⨯ node_modules\convex\dist\esm\react\client.js (318:10) @ useMutation
⨯ Error: Could not find Convex client!
<Toaster /> </div> </body> </html> </ClerkProvider> ); } database setup: import { mutation, query } from "./_generated/server"; import { v } from "convex/values"; export const SubmitIdeals = mutation({ args:{ title:v.string(), plang:v.string(), level:v.string(), description:v.string(), }, handler: async (ctx, args) =>{ const {title, plang, level, description} = args; await ctx.db.insert("ideal",{ title, plang, level, description }); } }) frontend use: const SubmitIdeals = useMutation(api.ideal.SubmitIdeals); and before I even running it, it's already give me an hint saying Ideals is not defing in api
useMutation must be used in the React component tree under ConvexProvider. Did you forget it? See https://docs.convex.dev/quick-start#set-up-convex-in-your-react-app
at Submit (./components/submitIdeal.tsx:34:83)
Although this is my first time using convex am learning through their docs thanks.
more code to help
Layout.tsx:
import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import "../styles/globals.css";
import Navbar from "@/components/navbar";
import { ClerkProvider } from "@clerk/nextjs";
import { Toaster } from "sonner";
import ConvexClientProvider from "./ConvexClientProvider";
return (
<ClerkProvider>
<html lang="en">
<body className={${poppins.className} wind}>
<div>
<Navbar />
<ConvexClientProvider>{children}</ConvexClientProvider>
{auth}<Toaster /> </div> </body> </html> </ClerkProvider> ); } database setup: import { mutation, query } from "./_generated/server"; import { v } from "convex/values"; export const SubmitIdeals = mutation({ args:{ title:v.string(), plang:v.string(), level:v.string(), description:v.string(), }, handler: async (ctx, args) =>{ const {title, plang, level, description} = args; await ctx.db.insert("ideal",{ title, plang, level, description }); } }) frontend use: const SubmitIdeals = useMutation(api.ideal.SubmitIdeals); and before I even running it, it's already give me an hint saying Ideals is not defing in api
Welcome to Convex | Convex Developer Hub
Convex is a novel, fun, and extremely productive way to make backends for your
16 Replies
Can you share more code? Say with a GitHub repo, or the full files? It's hard to know what's wrong without seeing where you use
useMutation(api.ideal.SubmitIdeals) or where that component is used in the React tree or where you import api from.I'm surely down for that am using nextTS though
Since you're using Next.js, try this quickstart instead: https://docs.convex.dev/quickstart/nextjs
Next.js Quickstart | Convex Developer Hub
Add Convex to a Next.js project
I followed the same step
Next.js Quickstart | Convex Developer Hub
Add Convex to a Next.js project
That's the docs I use
But everything works fine just seeing error showing in the browser
⨯ node_modules\convex\dist\esm\react\client.js (318:10) @ useMutation
⨯ Error: Could not find Convex client!
useMutation must be used in the React component tree under ConvexProvider. Did you forget it? See https://docs.convex.dev/quick-start#set-up-convex-in-your-react-app
at Submit (./components/submitIdeal.tsx:34:83)
nullWelcome to Convex | Convex Developer Hub
Convex is a novel, fun, and extremely productive way to make backends for your
That's the the real error from console
Do you use git, could you share your code on GitHub? Or share all of the files somehow, like with a zipfile?
GitHub
GitHub - git-create-devben/devideal
Contribute to git-create-devben/devideal development by creating an account on GitHub.
Is it a specific branch? I don't see any convex code here
Ah there it is
Sorry just pushed
I downloaded and installed dependencies with
npm install
then pasted in Clerk credentials into my .env.local
and started a convex deployment with npx convex dev
then ran the code wiht npm run dev in another terminal and useMutation returned a mutation function — so it all seems to work!
have you run npx convex dev to create a Convex deployment, update codegen, and submit the code?
oh and I logged with clerk
@Devben I'm headed to bed, I think you're close! My first guess is making sure to run npx convex dev, based on your committed code it looks lke you haven't run it since writing that new function.
Next suggestion would be to git clone your repo again in a new location, npm install, paste in clerk credentials into the .env.local, and npx convex dev. Then run npm run dev in another terminal.Tom you're right
You're awesome keep the great work I really appreciate
Problem solved with npx convex dev and it's because am new haha 😂