NextJS 11: Warning: React does not recognize the `_newProperty` prop on a DOM element

Technical Questions
1

I’ve a “NextJS 11” app.

<BuilderComponent model="page" />; is added in my _app file
I get this error Message:

When I place any Element in Builder I got this Error message:

react-dom.development.js?61bb:67 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.
    at span
    at t (webpack-internal:///./node_modules/@builder.io/react/dist/builder-react.es5.js:67:94711)
    at render
    at t (webpack-internal:///./node_modules/@builder.io/react/dist/builder-react.es5.js:67:8391)
    at div
    at EmotionCssPropInternal
    at t (webpack-internal:///./node_modules/@builder.io/react/dist/builder-react.es5.js:67:17766)
    at div
    at div
    at VariantsProvider (webpack-internal:///./node_modules/@builder.io/react/dist/builder-react.es5.js:67:22881)
    at BuilderContent (webpack-internal:///./node_modules/@builder.io/react/dist/builder-react.es5.js:67:24329)
    at div
    at t (webpack-internal:///./node_modules/@builder.io/react/dist/builder-react.es5.js:67:37604)
    at IntlProvider (webpack-internal:///./node_modules/react-intl/lib/src/components/provider.js:84:47)
    at AuthProvider (webpack-internal:///./src/context/AuthContext.jsx:46:22)
    at CookiesProvider (webpack-internal:///./node_modules/react-cookie/es6/CookiesProvider.js:25:28)
    at LayoutProvider (webpack-internal:///./src/context/LayoutContext.jsx:17:73)
    at MetashopApp (webpack-internal:///./src/pages/_app.tsx:59:25)
    at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:14:20)
    at Wrapper (webpack-internal:///./node_modules/next-redux-wrapper/es6/index.js:182:35)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:257:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:753:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:892:25)
printWarning @ react-dom.development.js?61bb:67
error @ react-dom.development.js?61bb:43
validateProperty$1 @ react-dom.development.js?61bb:3513
warnUnknownProperties @ react-dom.development.js?61bb:3559
validateProperties$2 @ react-dom.development.js?61bb:3583
validatePropertiesInDevelopment @ react-dom.development.js?61bb:8765
setInitialProperties @ react-dom.development.js?61bb:9041
finalizeInitialChildren @ react-dom.development.js?61bb:10201
completeWork @ react-dom.development.js?61bb:19470
completeUnitOfWork @ react-dom.development.js?61bb:22815
performUnitOfWork @ react-dom.development.js?61bb:22787
workLoopSync @ react-dom.development.js?61bb:22707
renderRootSync @ react-dom.development.js?61bb:22670
performSyncWorkOnRoot @ react-dom.development.js?61bb:22293
eval @ react-dom.development.js?61bb:11327
unstable_runWithPriority @ scheduler.development.js?3069:468
runWithPriority$1 @ react-dom.development.js?61bb:11276
flushSyncCallbackQueueImpl @ react-dom.development.js?61bb:11322
flushSyncCallbackQueue @ react-dom.development.js?61bb:11309
scheduleUpdateOnFiber @ react-dom.development.js?61bb:21893
enqueueSetState @ react-dom.development.js?61bb:12467
Component.setState @ react.development.js?72d0:365
eval @ builder-react.es5.js?cad6:15
BehaviorSubject.next @ index.esm.js?d30e:163
eval @ index.esm.js?d30e:2247
Promise.then (async)
Builder.flushGetContentQueue @ index.esm.js?d30e:2225
eval @ index.esm.js?d30e:2011
eval @ index.esm.js?d30e:38
characterData (async)
nextTick @ index.esm.js?d30e:44
Builder.queueGetContent @ index.esm.js?d30e:2010
BuilderContent.subscribeToContent @ builder-react.es5.js?cad6:15
BuilderContent.componentDidMount @ builder-react.es5.js?cad6:15
commitLifeCycles @ react-dom.development.js?61bb:20663
commitLayoutEffects @ react-dom.development.js?61bb:23426
callCallback @ react-dom.development.js?61bb:3945
invokeGuardedCallbackDev @ react-dom.development.js?61bb:3994
invokeGuardedCallback @ react-dom.development.js?61bb:4056
commitRootImpl @ react-dom.development.js?61bb:23151
unstable_runWithPriority @ scheduler.development.js?3069:468
runWithPriority$1 @ react-dom.development.js?61bb:11276
commitRoot @ react-dom.development.js?61bb:22990
performSyncWorkOnRoot @ react-dom.development.js?61bb:22329
scheduleUpdateOnFiber @ react-dom.development.js?61bb:21881
updateContainer @ react-dom.development.js?61bb:25482
eval @ react-dom.development.js?61bb:26021
unbatchedUpdates @ react-dom.development.js?61bb:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js?61bb:26020
hydrate @ react-dom.development.js?61bb:26086
renderReactElement @ index.tsx?8abf:527
doRender @ index.tsx?8abf:793
_callee2$ @ index.tsx?8abf:418
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:293
eval @ runtime.js?96cf:118
asyncGeneratorStep @ index.tsx?8abf:27
_next @ index.tsx?8abf:27
eval @ index.tsx?8abf:27
eval @ index.tsx?8abf:27
_render @ index.tsx?8abf:411
render @ index.tsx?8abf:411
eval @ next-dev.js?53bc:2
eval @ fouc.js?937a:14
requestAnimationFrame (async)
displayContent @ fouc.js:9
eval @ next-dev.js?53bc:7
Promise.then (async)
eval @ next-dev.js?53bc:44
eval @ next-dev.js:167
./node_modules/next/dist/client/next-dev.js @ main.js?ts=1634212448346:670
__webpack_require__ @ webpack.js?ts=1634212448346:873
checkDeferredModules @ webpack.js?ts=1634212448346:46
webpackJsonpCallback @ webpack.js?ts=1634212448346:33
(anonymous) @ main.js?ts=1634212448346:2
Show 32 more frames

That is my /pages/maintenance.tsx file:

// application
import { GetServerSideProps, GetServerSidePropsContext } from 'next';
import { builder, BuilderComponent } from '@builder.io/react';
// import MaintenanceComponent from '../components/customComponents/MaintenanceComponent';

builder.init(process.env.NEXT_PUBLIC_BUILDER_KEY!);


export const getServerSideProps = async (context: GetServerSidePropsContext) => {
    console.log('CONTEXT from /maintenace ###<>>>> ', context);
    const content = await builder.get('page', { url: context.resolvedUrl }).promise();

    console.log("CONTENT in /maintenance >>>> ", content)
    return {
        props: { content },
        notFound: !content,
    };
};


export default function Maintenance(props: any) {
    console.log("/MAINTENANCE props", props);
    return  <>
    <h1>/MAINTENANCE</h1>
    {/* <MaintenanceComponent /> */}
    <BuilderComponent content={props.content} model="page" />;

    </> 
}

Public builder Key: fe16958c8a554c0cbdd68cf4ba028616

2

weired… somehow it’s gone… maybe it was a caching issue… but can someone please explain me that behaviour? When I added any layer to my Builder Layout it appears. When I deleted the layer it vanished…

3

I’m having the same issue with Next.js 12. In my case I got 2 error messages.
What I did is to create a custom component and use it in the page. The attributes in the devtools look like this: builderblock="[object object]" builderstate="[object object]"

React does not recognize the builderBlockprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasebuilderblock instead. If you accidentally passed it from a parent component, remove it from the DOM element.

React does not recognize the builderStateprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasebuilderstate instead. If you accidentally passed it from a parent component, remove it from the DOM element.

2 Likes
4

Same here. Did you found the solution for that?

5

Hello @l.simoes,

Could you please provide the steps to reproduce this issue and the SDK details? This will help us attempt to reproduce it on our end.

6

_newProperty is the name Builder sets to empty data bindings. At least one of your blocks has a data binding that isn’t set. That looks like:

Screenshot 2024-12-11 at 10.56.07
Screenshot 2024-12-11 at 10.56.07598×750 26.4 KB

If you check the JSON view for the block it becomes clearer:

Screenshot 2024-12-11 at 10.58.14
Screenshot 2024-12-11 at 10.58.14838×388 22.3 KB

I also had a bad time looking for the origin of the warning. One would expect an empty data binding to add nothing. Instead of that, you get an useless property and a warning. Fantastic.

Now you’ll have to look everywhere to find the block(s) that have the empty data binding. Try looking for elements with the database/pencil icon at the rightmost end:

Screenshot 2024-12-11 at 11.01.43

In case you’re developing, a saner approach is to filter the property name out of the data blocks from content responses.

In any case, good luck.

7

Hello @Oscar,

Thank you for pointing this out! Based on your feedback, we are currently discussing the issue internally and are working towards addressing it more effectively in the near future.

We truly value and appreciate your input—it helps us improve and serve you better.

Thanks again, and feel free to reach out if you have any further concerns or suggestions!

Best regards,

1 Like
8

Hi @manish-sharma,

Coincidentally I’ve just developed a code snippet in TypeScript to check for elements causing this warning:

/*
 * IMPORTANT!
 * This code has been only tested with React SDK Gen 1.
 * Thus, it imports declarations from that specific SDK,
 * and the same logic might not work for other SDKS.
 * 
 *
 * Example usage:
 * ```typescript
 * const page = await builder.get("page", {
 *   // project specific options, response includes "data.blocks"
 * };
 *
 * console.log(
 *   getComponentsWithNewProperty({
 *     children: page.data.blocks,
 *   })
 * );
 * ```
 */ 
import type { BuilderElement } from "@builder.io/react";

interface GetComponentsWithNewPropertyOptions {
  stats?: {
    processedComponents: number;
    maxDepth: number;
  };
  matches?: BuilderElement[];
  children: BuilderElement[];
}

const getComponentsWithNewProperty = ({
  stats = { processedComponents: 0, maxDepth: -1 },
  matches = [],
  children,
}: GetComponentsWithNewPropertyOptions): Required<
  Omit<GetComponentsWithNewPropertyOptions, "children">
> => {
  stats.maxDepth += 1;
  stats.processedComponents += children.length;

  for (const childElem of children) {
    const { properties, bindings } = childElem;
    const newPropertyMatches = [properties, bindings].filter(
      (prop) => prop && "_newProperty" in prop,
    );
    if (newPropertyMatches.length > 0) {
      matches.push(childElem);
    }
    if (childElem.children && childElem.children.length > 0) {
      getComponentsWithNewProperty({
        stats,
        matches,
        children: childElem.children,
      });
    }
  }
  return { stats, matches };
};

Until it’s addressed, this might be useful for anyone else trying to debug.

1 Like