JavaScript Error: Invalid DOM property `class`

This topic has 3 replies, 2 voices, and was last updated 4 years, 11 months ago by Drake Cooper.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

April 9, 2020 at 7:51 AM #18935

Participant

Hi,
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.

April 9, 2020 at 8:42 AM #18936

Anh Tran

Keymaster

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:

https://www.loom.com/share/9e7ea11e6a974e1db22dd8d82258a32e

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

April 10, 2020 at 4:27 AM #18948

Drake Cooper

Participant

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

April 10, 2020 at 6:06 AM #18952

Drake Cooper

Participant

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

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.