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	4	4168	October 31, 2024
Fetching content failed, expected apiKey to be defined instead got: null Technical Questions visual-editor , react , api , nextjs	4	1274	January 12, 2024
Custom components with noWrap cause console warning regarding key Bugs react	11	42	October 24, 2024
Warning: Prop `builder-inline-styles` did not match. Server: "null" Client: "" Technical Questions nextjs	5	519	May 23, 2024
NextJS Builder Integration error Technical Questions nextjs	8	807	October 30, 2024

Next.js console errors

Related topics