Passing down functions from nextjs to builder.io

Visual Editor Help
1

Hi, I am trying to pass down functions from my nextjs app to builder.io’s CMS. My code and the error it produces. The challenge: I automatically render all pages created in builder.io CMS and just cannot get the right context into my pages.

My page-code in builder.io CMS:

export default function MyComponent(props) {
  return (
    <div
      id="clickableElement"
      $name="Record-Button-Highlight"
      onClick={(event) => {
        context.startAudio();
      }}
...

the error:

builder-react.es5.js:55 Builder custom code error: startAudio is not defined in startAudio() ReferenceError: startAudio is not defined
    at eval (eval at stringToFunction (webpack-internal:///(app-pages-browser)/./node_modules/@builder.io/react/dist/builder-react.es5.js), <anonymous>:32:13)
    at l (webpack-internal:///(app-pages-browser)/./node_modules/@builder.io/react/dist/builder-react.es5.js:55:6881)
    at h.<computed> (webpack-internal:///(app-pages-browser)/./node_modules/@builder.io/react/dist/builder-react.es5.js:55:17940)
    at HTMLUnknownElement.callCallback (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20461:14)
    at Object.invokeGuardedCallbackImpl (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20510:16)
    at invokeGuardedCallback (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20585:29)
    at invokeGuardedCallbackAndCatchFirstError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:20599:25)
    at executeDispatch (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31936:3)
    at processDispatchQueueItemsInOrder (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31968:7)
    at processDispatchQueue (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31981:5)
    at dispatchEventsForPlugins (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:31992:3)
    at eval (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:32182:12)
    at batchedUpdates$1 (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24793:12)
    at batchedUpdates (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28653:12)
    at dispatchEventForPluginEventSystem (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:32181:3)
    at dispatchEvent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:29949:5)
    at dispatchDiscreteEvent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:29920:5)
l @ builder-react.es5.js:55
h.<computed> @ builder-react.es5.js:55
callCallback @ react-dom.development.js:20461
invokeGuardedCallbackImpl @ react-dom.development.js:20510
invokeGuardedCallback @ react-dom.development.js:20585
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:20599
executeDispatch @ react-dom.development.js:31936
processDispatchQueueItemsInOrder @ react-dom.development.js:31968
processDispatchQueue @ react-dom.development.js:31981
dispatchEventsForPlugins @ react-dom.development.js:31992
eval @ react-dom.development.js:32182
batchedUpdates$1 @ react-dom.development.js:24793
batchedUpdates @ react-dom.development.js:28653
dispatchEventForPluginEventSystem @ react-dom.development.js:32181
dispatchEvent @ react-dom.development.js:29949
dispatchDiscreteEvent @ react-dom.development.js:29920

My page.jsx:

import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "@/components/builder";
import Context from '../../components/Context/Context';

// Builder Public API Key set in .env file
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY);

export default async function Page(props) {
  const content = await builder
    // Get the page content from Builder with the specified options
    .get("page", {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: "/" + (props?.params?.page?.join("/") || ""),
      },
    })
    // Convert the result to a promise
    .toPromise();

  return (
    <>
        <Context>
            {/* Render the Builder page */}
            <RenderBuilderContent content={content} />
        </Context>
    </>
  );
}

My context component:
import { BuilderComponent } from ‘@builder.io/react’;

const Context = () => {
// Define your WebSocket and audio processing functions here
const startAudio = () => {
console.log(‘Start audio stream’);
// Define startAudio logic here
};

const stopAudio = () => {
console.log(‘Stop audio stream’);
// Define stopAudio logic here
};

const setupWebSocket = () => {
console.log(‘Setup WebSocket’);
// Define setupWebSocket logic here
};

return (
<BuilderComponent
model=‘page’
context = {{startAudio, stopAudio, setupWebSocket}}
/>
);
};

export default Context;

2

Hello @Florian,

For assistance, you can refer to the following resources:

3

I’m having trouble passing functions from my Next.js app to Builder.io’s CMS for auto-rendering pages. I keep getting errors, especially with the webcam context. Any tips on fixing this?