Unsupported Server Component type: undefined

[nicitaacom]

Link to the code that reproduces this issue

https://github.com/nicitaacom/23_store/blob/sub-root-add-products/app/(site)/components/Products.tsx

To Reproduce

1. pnpx create-next-app
2. set up supabase server using supabase docs - https://supabase.com/docs/guides/database
3. Crete supabaseServer.ts like that - otherwise you become the error about dynamic cookes usage - Dynamic server usage: Page couldn't be rendered statically because it used cookies #56630

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { Database } from "@/interfaces/types_db"

const supabaseServer = () => {
  cookies().getAll() // Keep cookies in the JS execution context for Next.js build
  return createServerComponentClient<Database>({ cookies })
}

export default supabaseServer

4.Fetch products from DB like this

import { ProductsSkeleton } from "@/components/Skeletons"
import supabaseServer from "@/utils/supabaseServer"
import { cache } from "react"

//get products from cache (check in future if product was edited - do new request to DB)
//if no products in cache - fetch from DB
const fetchProducts = cache(async () => {
  const products = await supabaseServer().from("products").select("*")
  console.log(9, "products - ", products)
  if (!products.data) return <div>No products found</div>
  return products.data
})

export default async function Products() {
  const products = await fetchProducts()
  //set individual quantity for each user in updatedProducts variable
  return (
    <div
      className="mobile:border-[1px] broder-border-color rounded 
    w-full max-w-[1440px] min-w-[80vw]">
      <div className="flex flex-row justify-between px-4">
        <h1 className="hidden tablet:flex text-lg">Products:</h1>
      </div>
      <ul className="flex flex-col gap-y-8"></ul>
    </div>
  )
}

5.Get this error

Current vs. Expected behavior

Expecting no error to hapen (or error with more info how to fix it)
But got the error that tells me nothing
I used Vite and on Vite I got not error (but I get worse performance)

 useEffect(() => {
    async function fetchProducts() {
      try {
        setIsLoading(true)
        const response = await supabase.from("products").select("*")
        if (response.error) throw response.error
        //add quantity for each product because (user A quantity - 2 - user B - quantity 3 )
        const updatedResponse = response.data.map(product => {
          const matchingProduct = userCartStore.products.find(item => item.id === product.id)
          return {
            ...product,
            quantity: matchingProduct ? matchingProduct.quantity : 0,
          }
        })

        setProducts(updatedResponse)
        setIsLoading(false)
      } catch (error) {
        console.error("fetchProducts - ", error)
      }
    }
    fetchProducts()
    //eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

pnpx --no-install next info
/media/kali/SSD_256GB/.pnpm-store/v3/tmp/dlx-89331:
 ERR_PNPM_FETCH_404  GET https://registry.npmjs.org/--no-install: Not Found - 404

This error happened while installing a direct dependency of /media/kali/SSD_256GB/.pnpm-store/v3/tmp/dlx-89331

--no-install is not in the npm registry, or you have no permission to fetch it.

No authorization header was set for the request.

Which area(s) are affected? (Select all that apply)

Package manager (npm, pnpm, Yarn)

Additional context

No response

[nicitaacom]

I had issue in index.ts

Fixed version of index.ts

import Products from "./Products"

export { Products }

I would like to add some docs and describe my experience with this error cause not only I expirience this error but now I don't see any link to create page on next js docs

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.