it is allowed.

it's likely that you are importing this component into a client component, making it a client component as well. no "use client" does not equate to the component being a server component

the parent:

import {
  BasePostCard,
  Pagination,
  PostCard,
  SearchInput,
} from '@/components';
import { Group, SimpleGrid, Stack, Text, Title } from '@mantine/core';
import { query } from './query';
import { CharacterFilter } from '@/components/filters/character';

type Props = {
  params: Promise<{ collectionId: string }>;
  searchParams: Promise<{
    page?: string;
    surah?: string;
    verse?: string;
    q?: string;
  }>;
};

const Collection = async ({ params, searchParams }: Props) => {
  const collectionId = +(await params).collectionId;
  const page = Number((await searchParams)?.page) || 1;
  const surah = (await searchParams).surah ?? '';
  const verse = (await searchParams).verse ?? '';
  const q = (await searchParams).q ?? '';

  const { collection, posts } = await query({
    collectionId,
    page,
    surah,
    verse,
    q,
  });

  console.log('we received ', collection);

  if (!posts.data.length) {
    return (
      <Stack>
        <Title>{collection.title}</Title>
        <Text>{collection.description}</Text>
        <p>no posts found</p>
      </Stack>
    );
  }

  return (
    <Stack>
      <Title>{collection.title}</Title>
      <Text>{collection.description}</Text>
      <Group justify='end' align='start'>
        <SearchInput />
        <CharacterFilter />
        {/* {resolveCollectionFilters(collection.extension)} */}
      </Group>
      <SimpleGrid
        cols={{
          base: 1,
          sm: 2,
          md: 3,
        }}
      >
        {posts?.type === 'BASE' &&
          posts.data.map((p) => <BasePostCard post={p} key={p.id} />)}
        {posts?.type !== 'BASE' &&
          posts.data.map((p) => (
            <PostCard
              key={p.id}
              post={{
                data: p,
                extension: posts.type,
              }}
            />
          ))}
      </SimpleGrid>
      <Pagination itemsCount={posts.count} />
    </Stack>
  );
};

export default Collection;

the child

import { db } from '@/db';
import { $postExtraData } from '@/db/schema';
import { eq } from 'drizzle-orm';

export const CharacterFilter = async () => {
  const characters = await db
    .select()
    .from($postExtraData)
    .where(eq($postExtraData.key, 'CHARACTER'));
  console.log('where the filter is living');
  return <p>hello</p>;
};

the code looks fine here, do you use this component in any other places? what happens if you add import "server-only" to the top of the component?

Ahh, I was doing this:

import { PostExtensionEnum } from '@/db/types';
import { SurahVerseFilters } from './surah-verse';
import { CharacterFilter } from './character';

export const resolveCollectionFilters = (extension: PostExtensionEnum) => {
  switch (extension) {
    case 'SURAH_WITH_VERSE':
      return <SurahVerseFilters />;
    case 'CHARACTER':
      return <CharacterFilter />;
  }
};

when I commented the code, the issue solved, thank you.

but why this is making an issue?

hmm what if you make this resolveCollectionFilters a component instead?

I'll try.

even this one still looks okay to me, not too sure what's wrong here. sure, a function is not the best idea here compared to a proper component but i don't see how that doesn't work either

same issue as if it is still a function.

this is not causing the problem:

import { PostExtensionEnum } from '@/db/types';
// import { SurahVerseFilters } from './surah-verse';
import { CharacterFilter } from './character';

export const ResolveCollectionFilters = ({
  extension,
}: {
  extension: PostExtensionEnum;
}) => {
  switch (extension) {
    case 'SURAH_WITH_VERSE':
      return <p>hi</p>;
    case 'CHARACTER':
      return <p>hiii</p>;
  }
};

this does cause an issue:

import { PostExtensionEnum } from '@/db/types';
// import { SurahVerseFilters } from './surah-verse';
import { CharacterFilter } from './character';

export const ResolveCollectionFilters = ({
  extension,
}: {
  extension: PostExtensionEnum;
}) => {
  switch (extension) {
    case 'SURAH_WITH_VERSE':
        return <SurahVerseFilters />;
    case 'CHARACTER':
        return <CharacterFilter /
  }
};

I think I know why this happens.

oh yeah then that is what it is. you are still (accidentally) importing the server component into a client component despite not using the server component there

so from the import chain, it will eventually be that you are importing "dns" (from the database connection) into a client component which doesn't work