Next.js Discord

Discord Forum

Could not find the module in react client manifest

Unanswered
Havana posted this in #help-forum
Open in Discord
HavanaOP
Hi all. I have the component as shown below:

"use server";

import { createClient } from "@/utils/supabase/server";
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export async function ClientSelect() {
    const supabase = createClient();

    const { data, error } = await supabase
        .from('clients')
        .select();

    if (error) {
        console.error(error);
        return <p>Error loading clients</p>;
    }

    return (
        <>
            <Label htmlFor="select-client">Client to apply form to</Label>
            <Select name='selectClient'>
                <SelectTrigger>
                    <SelectValue placeholder="Select client" />
                </SelectTrigger>
                <SelectContent>
                    {data?.map((client) => (
                        <SelectItem key={client.id} value={client.id}>{client.name}</SelectItem>
                    ))}
                </SelectContent>
            </Select>
        </>
    );
}


It complains with this error when importing it into a client component:


Could not find the module "C:\Users\bradl\Desktop\client\components\ui\label.tsx#Label" in the React Client Manifest. This is probably a bug in the React Server Components bundler.


does anybody know why? afaik this is a valid path

14 Replies

HavanaOP
Hmm deleting the server directive actually fixes it, but then i get the error:

you're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/getting-sta

Which leads me back to my original question, which is how do i actually request data in a client component and mask it behind a server action?
HavanaOP
So, in /app, I have a form. In this form i want to display some data which i fetch from supabase:

'use client';

import { useFormStatus } from 'react-dom';
import { createSalonClient } from '../../actions/actions';
import { Input } from "@/components/ui/input";
import { Button } from '@/components/ui/button';
import { Label } from "@/components/ui/label";
import { ClientSelect } from '@/components/ClientSelect'; 

export default function CreateClientForm() {
    const { pending } = useFormStatus();

    async function submitClient(formData: FormData) {
        createSalonClient(formData);
    }

    return (
        <div>
            <div className='flex flex-col items-center mt-12 mb-12'>
                <h1> Client form</h1>
                <h2> Select a client, then apply a form type to them</h2>
            </div>

            <form className='grid grid-cols-2' action={submitClient}>
                <div className='m-12'>
                    <ClientSelect />
                </div>
                {/* Add more form fields here as needed */}
            </form>
        </div>
    );
}

If that makes sense?
HavanaOP
Ah ok, that sounds more like what i'm trying to do then. It's my first time using next on top of react. How would that look compared to what i have?
joulev
async function SomeServerComponentLikePageOrLayout() {
const data = await getData();
return <CreateClientForm data={data} />;
}


"use client";
function CreateClientForm({ data }) {
return …
}
HavanaOP
So i've refactored it to look like:

import { useFormStatus } from 'react-dom';
import { createSalonClient } from '../../actions/actions';
import { Input } from "@/components/ui/input";
import { Button } from '@/components/ui/button';
import { Label } from "@/components/ui/label"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import { createClient } from "@/utils/supabase/server";
import { ClientSelect } from '@/components/ClientSelect';

async function ClientDropdown() {

    const supabase = createClient();

    const { data, error } = await supabase
        .from('clients')
        .select()

    console.log(data);

    return (
        <ClientSelect clients={data} />
    )
}

'use client'
export default function CreateClientForm() {

    const { pending } = useFormStatus();

    async function submitClient(formData: FormData) {
        createSalonClient(formData);
    }


    return (
        <div>
            <div className='flex flex-col items-center mt-12 mb-12'>
                <h1> Client form</h1>
                <h2> Select a client, then apply a form type to them</h2>
            </div>

            <form className='grid grid-cols-2' action={submitClient}>
                <div className='m-12'>
                    <ClientDropdown />
                </div>

            </form>
        </div>
    )
}


but i still get The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue
Can’t combine server components and client components in the same file
Server component imports and uses client component, not the other way round
HavanaOP
Hmm i see, but since it's a form with a server action, where should it live then? Can i put it in my components folder and still have the server action attached to it?
joulev
The location of the file doesn’t matter. You can put it anywhere.
HavanaOP
Ah this makes sense, thank you for clarfying this