NextJS 13, app router, 3rd party providers issue

I am using a provider that requires my root layout to "use client". In doing so you lose the ability to export metadata (inc site name, description etc). One way around this in NextJS is to put the providers in a separate client based component and import that component in to your root layout. However, with the my provider I am still getting

"Unhandled Runtime Error, Error: Unsupported Server Component type: undefined"

Are there any other tricks or ways around this? (if I comment out the Providers import/function call the app runs fine, so it's definitely a conflict between the provider and NextJS)

My root layout:

import { Inter } from 'next/font/google'
import { Providers } from '@/components/providers'

import './globals.css'

import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer';

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
    title: 'blahblah',
    keywords: ['blah', 'blah', 'blah', 'blah', 'blah', 'blah', 'blah'],
    description: 'blahblah blah',
}


const RootLayout = ({ children }) => {
    return (

        <html lang="en">
            <body className={inter.className}>
                <Providers>
                    <Navbar />
                        <div className='main'>
                            {children}
                        </div>
                    <Footer />
                </Providers>
            </body>
        </html>

    )
}

export default RootLayout

My providers component:

"use client"

import { ThirdwebProvider, metamaskWallet } from "@thirdweb-dev/react"
import { RedlightChain } from "@thirdweb-dev/chains"

const Providers = ({children}) => {
    <ThirdwebProvider supportedWallets={[metamaskWallet()]} activeChain={RedlightChain}>
        {children}
    </ThirdwebProvider>
}

export default Providers

Solution

Based on the code you provided, it seems like you are missing a return statement in your Providers component. Without the return statement, the component doesn't render any JSX, which could result in the "Unsupported Server Component type" error you are experiencing.