can you show the code of handleSubmit?

Yes here

you need to mark this as server action because it is the one passed to the action props

yes i tried these before it dont work

because you calling event.preventDefault I think

the parameter of the action should be a formData

same issue

is this a client component?

do you have 'use client' on top?

no xD it uses server to

no 'use client' on top?

how about its parent?

no its a own page has no parent

on top its 'use server' also

remove 'use server' on the top

all component are server component by default. 'use server' is for server action

im now a step ahead, now it is sendMessage not defined if i press submit button

move sendMessage above of handleSubmit

or turn it to function sendMessage() {}

now i get the same error i did before but not while loading just bu submit

ok remove 'use server' in sendMessage

btw, i think you need to await xataCLient.db.messages.create()?

i delete await i just wantet to get the response for test i removed use server now its not defined

sendMessage is undefine?

Unhandled Runtime Error
Error: sendMessage is not defined

is that normal ore a bug

well, I would say just move the body of sendMessage to handleSubmit

yes i think of that too and tried it but i get that error again Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
[function, ..., ..., ...] and i didnt delete use server

yes try it again

i did

still doesn't work?

by submit i get this error

what error?

can you show the code again?

where is userId and otherUserId coming from?

db

i fetch it in the same page it work well

what version of next are you using

i createt yesterday so the newest ` "next": "14.0.4",``

weird

are you fetching the data with the xataClient too?

`import React from "react";
import { getXataClient } from "@/src/xata";
import { auth } from "@clerk/nextjs";

export default async function Page({ params }: { params: { chat: string } }) {
const { userId } = auth();
const otherUserId = params.chat;
const xataClient = getXataClient();
let chat: any;

const searchChats = await xataClient.db.pchat
.filter({
participants: { $includes: userId! && otherUserId },
})
.getMany();
if (searchChats.length > 0) {
chat = searchChats[0];
}

if (searchChats.length === 0) {
const createChat = await xataClient.db.pchat.create({
participants: [userId || "", otherUserId],
});
chat = createChat;
}

async function handleSubmit (data: FormData) {
"use server";
xataClient.db.messages.create({
chatid: 'sadsad',
sender: 'userId',
reciver: 'otherUserId',
message: "test",
});
};


return (
<div>
otherid: {params.chat} my id: {userId} chat: {chat.participants[0]}
{chat.participants[1]}
<div className="mt-10 flex gap-5">
<form action={handleSubmit}>
<input
className="outline-slate-400 outline-double"
type="text"
placeholder="message"
/>
<button className="border-2 p-4" type="submit">
send.
</button>
</form>
</div>
</div>
);
}
``

yes

i can upload to github if you want

sure

im in /app/c/[chat]

ok let me see

thanks for your time

it works for me

maybe try deleting node_module and .next then npm install again

i know why

why lol

ah

i moved it out the function and now it work

i haven't try it inside the page

I saw they put it outside of component from their doc

i didnt now that could cause erros

thanks buddy can i honor you or somthing

np you can do that in #kudos

they just show it outside of component but didn't say why or it is needed

i saw other docs where it was inside so i didnt care about that but i haved learned somthing thats great, thanks again