Tet banner

Custom Fields
Support MB Blocks JavaScript Error: Invalid DOM property `class`

  • Creator
  • #18935
    Drake Cooper

    I just installed MB Blocks using MetaBox AIO, created a new block with a single text field using the Builder, then tried to use the block. I can add the block fine, but whenever the block switches to edit mode, this error appears in the console:

    Warning: Invalid DOM propertyclass. Did you meanclassName?

    Doesn't matter if the edit area is within the content or the side bar.
    I didn't add a custom class name to the block.
    The same error appears if I create a block using using PHP.

    Using Firefox 75, WP 5.4, MetaBox 5.2.8, MetaBox AIO 1.11.2.
    There are no other extensions enabled that touch Gutenberg.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Author
  • #18936
    Anh Tran

    Hi Drake,

    I've just tested again with the latest version of Meta Box AIO and don't see any errors in the console. Please see my video:

    I remember I fixed this bug in the latest version of MB Views.

    Drake Cooper

    Thanks for the video.

    I setup another WP site, completely stock, and I didn't get any errors on that one. As a test, I went back to my original site and deleted all the plugins and themes (except MB and MB AIO) and installed the stock twentytwenty theme, but I still got that react error. I tried completely clearing my local storage, session storage and cookies for that site and trying again, but it didn't help.

    Not sure if it'll help, but here's the full stack trace from the error. I also tried using Chrome and got the exact same error.

    Warning: Invalid DOM property 'class'. Did you mean 'className'?   react-dom.js?ver=16.9.0:539
        in div (created by e)
        in e (created by e)
        in bubbles_virtually_fill_Fill (created by slot_fill_Fill)
        in slot_fill_Fill (created by InspectorControlsFill)
        in InspectorControlsFill (created by Context.Consumer)
        in IfBlockEditSelected(InspectorControlsFill) (created by e)
        in e (created by edit)
        in edit (created by Edit)
        in Edit (created by WithToolbarControls(Edit))
        in WithToolbarControls(Edit) (created by WithInspectorControl(WithToolbarControls(Edit)))
        in WithInspectorControl(WithToolbarControls(Edit)) (created by WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit))))
        in WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit)))
        in Unknown (created by WithDispatch(Component))
        in WithDispatch(Component)
        in Unknown (created by WithMultipleValidation(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit)))))
        in WithMultipleValidation(WithInspectorControl(WithInspectorControl(WithToolbarControls(Edit)))) (created by WithFilters(Edit))
        in WithFilters(Edit) (created by BlockEdit)
        in BlockEdit (created by block_BlockListBlock)
        in BlockCrashBoundary (created by block_BlockListBlock)
        in div (created by ForwardRef)
        in ForwardRef (created by block_BlockListBlock)
        in block_BlockListBlock (created by (block_BlockListBlock))
        in (block_BlockListBlock) (created by WithFilters(block_BlockListBlock))
        in WithFilters(block_BlockListBlock) (created by IfCondition(WithFilters(block_BlockListBlock)))
        in IfCondition(WithFilters(block_BlockListBlock)) (created by WithDispatch(IfCondition(WithFilters(block_BlockListBlock))))
        in WithDispatch(IfCondition(WithFilters(block_BlockListBlock)))
        in Unknown (created by WithSelect(WithDispatch(IfCondition(WithFilters(block_BlockListBlock)))))
        in WithSelect(WithDispatch(IfCondition(WithFilters(block_BlockListBlock))))
        in Unknown (created by Pure(WithViewportMatch(WithSelect(WithDispatch(IfCondition(WithFilters(block_BlockListBlock)))))))
        in Pure(WithViewportMatch(WithSelect(WithDispatch(IfCondition(WithFilters(block_BlockListBlock)))))) (created by BlockList)
        in div (created by ForwardRef(RootContainer))
        in div (created by InsertionPoint)
        in InsertionPoint (created by ForwardRef(RootContainer))
        in ForwardRef(RootContainer) (created by BlockList)
        in BlockList
        in Unknown (created by VisualEditor)
        in div (created by CopyHandler)
        in CopyHandler (created by WithDispatch(CopyHandler))
        in WithDispatch(CopyHandler) (created by VisualEditor)
        in div (created by ObserveTyping)
        in ObserveTyping (created by WithSafeTimeout(ObserveTyping))
        in WithSafeTimeout(ObserveTyping) (created by VisualEditor)
        in div (created by WritingFlow)
        in div (created by WritingFlow)
        in WritingFlow (created by VisualEditor)
        in div (created by CopyHandler)
        in CopyHandler (created by WithDispatch(CopyHandler))
        in WithDispatch(CopyHandler) (created by VisualEditor)
        in div (created by Typewriter)
        in Typewriter
        in Unknown (created by WithSelect(Typewriter))
        in WithSelect(Typewriter) (created by VisualEditor)
        in div (created by BlockSelectionClearer)
        in BlockSelectionClearer (created by WithDispatch(BlockSelectionClearer))
        in WithDispatch(BlockSelectionClearer)
        in Unknown (created by WithSelect(WithDispatch(BlockSelectionClearer)))
        in WithSelect(WithDispatch(BlockSelectionClearer)) (created by VisualEditor)
        in VisualEditor (created by Layout)
        in div (created by EditorSkeleton)
        in div (created by EditorSkeleton)
        in div (created by EditorSkeleton)
        in EditorSkeleton (created by NavigateRegions(EditorSkeleton))
        in div (created by NavigateRegions(EditorSkeleton))
        in NavigateRegions(EditorSkeleton) (created by Layout)
        in div (created by FocusReturnProvider)
        in FocusReturnProvider (created by Layout)
        in Layout (created by Editor)
        in ErrorBoundary (created by Editor)
        in BlockEditorProvider (created by WithDispatch(BlockEditorProvider))
        in WithDispatch(BlockEditorProvider)
        in Unknown (created by Context.Consumer)
        in WithRegistryProvider(WithDispatch(BlockEditorProvider)) (created by EditorProvider)
        in EntityProvider (created by EditorProvider)
        in EntityProvider (created by EditorProvider)
        in EditorProvider (created by WithDispatch(EditorProvider))
        in WithDispatch(EditorProvider)
        in Unknown (created by WithSelect(WithDispatch(EditorProvider)))
        in WithSelect(WithDispatch(EditorProvider))
        in Unknown (created by Context.Consumer)
        in WithRegistryProvider(WithSelect(WithDispatch(EditorProvider))) (created by Editor)
        in div (created by DropZoneProvider)
        in DropZoneProvider (created by Editor)
        in slot_fill_provider_SlotFillProvider (created by SlotFillProvider)
        in SlotFillProvider (created by Editor)
        in StrictMode (created by Editor)
        in Editor (created by WithDispatch(Editor))
        in WithDispatch(Editor)
        in Unknown (created by WithSelect(WithDispatch(Editor)))
        in WithSelect(WithDispatch(Editor))
    warningWithoutStack @ react-dom.js?ver=16.9.0:539
    warning @ react-dom.js?ver=16.9.0:2851
    validateProperty$1 @ react-dom.js?ver=16.9.0:8598
    warnUnknownProperties @ react-dom.js?ver=16.9.0:8646
    validateProperties$2 @ react-dom.js?ver=16.9.0:8666
    validatePropertiesInDevelopment @ react-dom.js?ver=16.9.0:8718
    setInitialProperties @ react-dom.js?ver=16.9.0:8978
    finalizeInitialChildren @ react-dom.js?ver=16.9.0:10080
    completeWork @ react-dom.js?ver=16.9.0:19243
    completeUnitOfWork @ react-dom.js?ver=16.9.0:22379
    performUnitOfWork @ react-dom.js?ver=16.9.0:22356
    workLoopSync @ react-dom.js?ver=16.9.0:22323
    renderRoot @ react-dom.js?ver=16.9.0:22016
    runRootCallback @ react-dom.js?ver=16.9.0:21692
    (anonymous) @ react-dom.js?ver=16.9.0:11491
    unstable_runWithPriority @ react.js?ver=16.9.0:2820
    runWithPriority$2 @ react-dom.js?ver=16.9.0:11443
    flushSyncCallbackQueueImpl @ react-dom.js?ver=16.9.0:11487
    flushSyncCallbackQueue @ react-dom.js?ver=16.9.0:11476
    discreteUpdates$1 @ react-dom.js?ver=16.9.0:21815
    discreteUpdates @ react-dom.js?ver=16.9.0:2357
    dispatchDiscreteEvent @ react-dom.js?ver=16.9.0:6104
    Drake Cooper

    I've found the reason one site has the error and one doesn't. My original site has define( 'SCRIPT_DEBUG', true ); set, my new test site didn't. That might be why you weren't seeing the error too.

    In addition to the first error, if I kept editing blocks after the first error was triggered, it would later trigger this error Warning: Can't perform a React state update on an unmounted component.

    Full trace: https://pastebin.com/8hHYdSUh

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.