我使用的提供程序需要我的根布局“使用客户端”。这样做你失去了导出元数据的能力（包括网站名称，描述等）。在NextJS中解决这个问题的一种方法是将提供程序放在一个独立的基于客户端的组件中，并将该组件导入到根布局中。然而，与我的供应商，我仍然得到
"未处理的运行时错误，错误：不支持的服务器组件类型：未定义"
有没有其他的方法或技巧？（如果我注解掉Providers import/function调用，应用程序运行良好，所以这肯定是provider和NextJS之间的冲突）
我的根布局：
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我的提供程序组件：
"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
1条答案
按热度按时间8wtpewkr1#
根据您提供的代码，似乎您在Providers组件中缺少一个return语句。如果没有return语句，组件不会呈现任何JSX，这可能导致您遇到的“Unsupported ServerComponent type”错误。