Next.js console errors

onurfesci · November 28, 2023, 8:11pm

Builder public api key
fd2fab869b6342598809d4af1f4ac419

What are you trying to accomplish
I have integrated builder.io as per the Next.js (app router) integration docs. My app runs fine, however I have the below error for every registered component, and also many console errors and warnings.

This pollutes the console and also terminal where Next.js is running. Is the team planning to tackle these warnings and errors?

Key prop spread error

Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, color: ..., backgroundColor: ..., builderBlock: ..., builderState: ..., children: ..., style: ..., className: ..., builder-id: ...};
  <ForwardRef(Box) {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {color: ..., backgroundColor: ..., builderBlock: ..., builderState: ..., children: ..., style: ..., className: ..., builder-id: ...};
  <ForwardRef(Box) key={someKey} {...props} />
    at BuilderBox (webpack-internal:///(ssr)/./src/builder-registry.tsx:31:23)
    at eval (webpack-internal:///(ssr)/../../node_modules/@builder.io/react/dist/builder-react.es5.js:1876:21)
    at BuilderBlock (webpack-internal:///(ssr)/../../node_modules/@builder.io/react/dist/builder-react.es5.js:462:47)
    at div
    at BasicProvider (webpack-internal:///(ssr)/../../node_modules/@emotion/core/dist/emotion-element-39b82f0b.esm.js:45:38)
    at EmotionCssPropInternal
    at t1 (webpack-internal:///(ssr)/../../node_modules/@builder.io/react/dist/builder-react.es5.js:709:36)
    at div
    at div
    at VariantsProvider (webpack-internal:///(ssr)/../../node_modules/@builder.io/react/dist/builder-react.es5.js:807:17)
    at BuilderContent (webpack-internal:///(ssr)/../../node_modules/@builder.io/react/dist/builder-react.es5.js:854:47)
    at div
    at t1 (webpack-internal:///(ssr)/../../node_modules/@builder.io/react/dist/builder-react.es5.js:1255:18)
    at RenderBuilderContent (webpack-internal:///(ssr)/./src/components/builder.tsx:23:33)
    at Lazy
    at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:239:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
    at NotFoundErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:343:11)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:151:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:226:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at Lazy
    at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:352:11)
    at Lazy
    at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:239:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
    at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:343:11)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:151:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:226:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at Lazy
    at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:352:11)
    at Lazy
    at div
    at eval (webpack-internal:///(ssr)/../../node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:61:74)
    at Box (webpack-internal:///(ssr)/../../node_modules/@mui/system/esm/createBox.js:34:76)
    at NavProvider (webpack-internal:///(ssr)/./src/components/Nav/parts/NavProvider.tsx:14:24)
    at AuthProvider (webpack-internal:///(ssr)/../../node_modules/react-oidc-context/dist/esm/react-oidc-context.js:107:13)
    at AuthProvider (webpack-internal:///(ssr)/./src/providers/AuthProvider/AuthProvider.tsx:20:25)
    at ThemeProvider (webpack-internal:///(ssr)/../../node_modules/@mui/private-theming/ThemeProvider/ThemeProvider.js:45:13)
    at ThemeProvider (webpack-internal:///(ssr)/../../node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js:58:13)
    at CssVarsProvider (webpack-internal:///(ssr)/../../node_modules/@mui/system/esm/cssVars/createCssVarsProvider.js:58:32)
    at CssVarsProvider
    at NextAppDirEmotionCacheProvider (webpack-internal:///(ssr)/./src/components/ThemeRegistry/EmotionCache.tsx:20:13)
    at ThemeRegistry (webpack-internal:///(ssr)/./src/components/ThemeRegistry/ThemeRegistry.tsx:12:26)
    at Providers (webpack-internal:///(ssr)/./src/app/[locale]/Providers.tsx:18:22)
    at Lazy
    at body
    at html
    at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:239:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
    at NotFoundErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)
    at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:343:11)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:151:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:226:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at Lazy
    at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:352:11)
    at Lazy
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:71:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:79:11)
    at ReactDevOverlay (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:296:11)
    at Router (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:165:11)
    at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:99:9)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:128:11)
    at AppRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:436:13)
    at Lazy
    at Lazy
    at /Users/onur/repos/webapp-customer-react/apps/webapp-marketing/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:380095
    at /Users/onur/repos/webapp-customer-react/apps/webapp-marketing/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:380095
    at ServerInsertedHTMLProvider (/Users/onur/repos/webapp-customer-react/apps/webapp-marketing/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:38:17348)

Unrecognized prop console error

Warning: React does not recognize the `_newProperty` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `_newproperty` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Warning: React does not recognize the `builderBlock` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `builderblock` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Undefined bound values error (they are not undefined)

Builder custom code error: Cannot read properties of undefined (reading 'solidBg') in var _virtual_index=state.palette.primary.solidBg;return _virtual_index TypeError: Cannot read properties of undefined (reading 'solidBg')

Code stack you are integrating Builder with
Next.js v14.0.3
Node.js v18.12.0

Reproducible code example

const BuilderBox = ({ attributes, key, ...rest }) => (
  <Box key={key} {...rest} {...attributes} />
);
Builder.registerComponent(withChildren(BuilderBox), {
  name: 'ThemedBox',
  canHaveChildren: true,
  noWrap: true,
  override: true,
  inputs: [
    {
      friendlyName: 'Background Color',
      name: 'backgroundColor',
      type: 'string',
      enum: [
        {
          label: 'Primary',
          value: 'primary.500',
        },
      ],
    },
  ],
});

manish-sharma · December 11, 2023, 8:00pm

Hello @onurfesci,

To address the issue you’re encountering with withChildren, try including a defaultChildren prop with appropriate values. This adjustment should help resolve the issue you’ve been facing.

Example:

const BuilderBox = ({ attributes, key,  ...rest }) => (
  <Box key={key} {...rest} {...attributes} />
);
Builder.registerComponent(withChildren(BuilderBox), {
  name: 'ThemedBox',
  canHaveChildren: true,
  noWrap: true,
  override: true,
  inputs: [
    {
      friendlyName: 'Background Color',
      name: 'backgroundColor',
      type: 'string',
      enum: [
        {
          label: 'Primary',
          value: 'primary.500',
        },
      ],
    },
  ],
  // Adding defaults is important for easy usability
  defaultChildren: [
    { 
      '@type': '@builder.io/sdk:Element',
      component: { name: 'Box'},
      responsiveStyles: {
        large: {
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'stretch',
          flexShrink: '0',
          position: 'relative',
          marginTop: '30px',
          textAlign: 'center',
          lineHeight: 'normal',
          height: 'auto',
          minHeight: '20px',
          minWidth: '20px',
          overflow: 'hidden',
          backgroundColor: 'yellow',
        },
      },
    }
  ]
});

Topic		Replies	Views
NextJS 11: Warning: React does not recognize the `_newProperty` prop on a DOM element Technical Questions	2	2770	November 12, 2021
Fetching content failed, expected apiKey to be defined instead got: null Technical Questions visual-editor , react , api , nextjs	4	1046	January 12, 2024
ERR! with npm install for dependency "@builder.io/react" : "latest" Bugs	6	171	February 2, 2024
Warning: Prop `builder-inline-styles` did not match. Server: "null" Client: "" Technical Questions nextjs	4	328	January 11, 2024
NextJS Builder Integration error Technical Questions nextjs	7	492	July 27, 2023

Next.js console errors

Related Topics