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.

1 Like