BuilderIO
Registering MUI Components in Builder.IO not working with NextJS app router.
Describe the bug
I am receiving error: Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.createContext) is not a function when registering MUI components on my builder.config.ts file in a NextJS app router environment. However, if I add 'use client' at the top of the builder.config.ts file then my pages with MUI v5 custom components work correctly. My MUI v5 custom components are marked with 'use client' correctly. This is using the latest AppRouterCacheProvider from MUI & Emotion here: https://mui.com/material-ui/guides/nextjs/
To Reproduce Steps to reproduce the behavior:
- Setup Next JS app router project
- Add Builder to app
- Add MUI to app
- Create custom component and register with Builder.
Expected behavior I don't think I should be adding 'use client' to the top of my builder.config.ts file
Additional context Add any other context about the problem here.
/app/[[...page]]/page.tsx:
import { builder } from '@builder.io/sdk'
import { RenderBuilderContent } from '@/components/builder'
import '../../builder.config'
// Replace with your Public API Key
builder.init('xxx')
interface PageProps {
params: {
page: string[]
}
}
export default async function Page(props: PageProps) {
const page = props?.params?.page?.join('/') || ''
const urlPath = page.includes('index') ? '/' : '/' + page
const content = await builder
.get('page', {
userAttributes: {
urlPath: urlPath
},
prerender: false
})
.toPromise()
return (
<>
{/* Render the Builder page */}
<RenderBuilderContent content={content} />
</>
)
}
/app/layout.tsx:
import './globals.css'
import { CssBaseline, ThemeProvider } from '@mui/material'
import theme from '@/theme/default-theme'
import Header from '@/components/header/header'
import Footer from '@/components/footer/footer'
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<AppRouterCacheProvider>
<ThemeProvider theme={theme}>
<CssBaseline></CssBaseline>
<Header></Header>
{children}
<Footer></Footer>
</ThemeProvider>
</AppRouterCacheProvider>
</body>
</html>
)
}
Thank you for all of the support in advance. We enjoy using Builder.io
@kcianflone I have encountered the same problem and am wondering what the correct solution is. The ticket was closed without any comments or reference to code changes
