Registering MUI Components in Builder.IO not working with NextJS app router.
- Dominant language
- TypeScript
- Stars
- 8.8k
- Forks
- 1.2k
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 17
Description
**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:
1. Setup Next JS app router project
2. Add Builder to app
3. Add MUI to app
4. 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 */}
)
}
/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 (
{children}
)
}
```
Thank you for all of the support in advance. We enjoy using Builder.io
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.