Hey, Can you confirm if <BuilderContent> should work with the new Next.js App Router inside Server Components?
I tried it in many places, with different data models, also in very basic examples, and it only works in Client Components.
Anywhere on the server, I get Server Error:
Error: (0 , react__WEBPACK_IMPORTED_MODULE_1__.createContext) is not a function
I was following SSR/Next.js example from here (second code block, for Next):
So I guess it should work on the server (since you have an example).
I intend to fetch the Data Model on the server and use the responded data in my custom component with Live Edit/Preview support. I use Data Model to manage links in my Header. I would like to see changes when I change the data model in the preview, but maybe it’s not possible? (or maybe I should do this in some other way if BuilderContent will not work? With useEffect?)
Detailed steps to reproduce the bug
Try to use BuilderContent anywhere in the Next.js App Router server component, it could be even very basic code without providing content or any options), like this:
<BuilderContent
model="model-name"
>
{(data) => {
console.log('data', data);
return <div>Header Links</div>;
}}
</BuilderContent>
I tried to use multiple options I have found in the source code, like:
inline- “Only render what was explicitly passed in viacontent- don’t fetch from the Builder API.”options.prerender: falseoptions.format: 'react'options.cachebust: false
Nothing helps.
I also tried multiple types of models (page, section, data). Always the same.
Code stack you are integrating Builder with
NextJS App Router, react
"dependencies": {
"@builder.io/dev-tools": "^0.2.15",
"@builder.io/react": "^3.2.4",
"@builder.io/sdk": "^2.2.2",
"next": "14.1.0",
"react": "^18",
"react-dom": "^18"
},
Full error call stack from the Browser:
Server Error
Error: (0 , react__WEBPACK_IMPORTED_MODULE_1__.createContext) is not a function
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
node_modules/@emotion/core/dist/emotion-element-39b82f0b.esm.js (11:0)
(rsc)/./node_modules/@emotion/core/dist/emotion-element-39b82f0b.esm.js
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/vendor-chunks/@emotion.js (160:1)
__webpack_require__
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./node_modules/@emotion/core/dist/core.esm.js (17:90)
(rsc)/./node_modules/@emotion/core/dist/core.esm.js
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/vendor-chunks/@emotion.js (150:1)
__webpack_require__
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./node_modules/@builder.io/react/dist/builder-react.es5.js (48:71)
(rsc)/./node_modules/@builder.io/react/dist/builder-react.es5.js
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/vendor-chunks/@builder.io.js (40:1)
__webpack_require__
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./src/components/Modules/Header/Header.tsx (8:75)
(rsc)/./src/components/Modules/Header/Header.tsx
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/app/[[...page]]/page.js (325:1)
__webpack_require__
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(rsc)/./src/app/layout.tsx (11:91)
(rsc)/./src/app/layout.tsx
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/app/[[...page]]/page.js (314:1)
Function.__webpack_require__
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/webpack-runtime.js (33:42)
async eq
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:402221)
async tr
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:405987)
async tn
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:406537)
async tu
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (36:2057)
async
file:///home/lucas/DEV/Projects/edukey-builder-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (36:2564)
And from the Debugger:
Debugger attached.
⨯ node_modules/@emotion/core/dist/emotion-element-39b82f0b.esm.js (11:0) @ eval
⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.createContext) is not a function
at eval (webpack-internal:///(rsc)/./node_modules/@emotion/core/dist/emotion-element-39b82f0b.esm.js:24:93)
at (rsc)/./node_modules/@emotion/core/dist/emotion-element-39b82f0b.esm.js (/home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/vendor-chunks/@emotion.js:160:1)
at __webpack_require__ (/home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///(rsc)/./node_modules/@emotion/core/dist/core.esm.js:17:90)
at (rsc)/./node_modules/@emotion/core/dist/core.esm.js (/home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/vendor-chunks/@emotion.js:150:1)
at __webpack_require__ (/home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///(rsc)/./node_modules/@builder.io/react/dist/builder-react.es5.js:48:71)
at (rsc)/./node_modules/@builder.io/react/dist/builder-react.es5.js (/home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/vendor-chunks/@builder.io.js:40:1)
at __webpack_require__ (/home/lucas/DEV/Projects/edukey-builder-nextjs/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///(rsc)/./src/components/Modules/Header/Header.tsx:8:75) {
type: 'TypeError',
page: '/favicon.ico'
}
null
