Typeerror: Cannot Read Property 'map' of Null
This post was most recently updated on February 25th, 2022.
4 min read.
So, in one case over again, I discover myself wasting fourth dimension trying to prepare WordPress. Though it is a powerful platform, it's a never-ending source of grief when trying to maintain a site with a non-trivial number of plugins. Working with a static website creator would be much more fun, and there is a expert chance that the site would stay up far more, but it would take considerable endeavor to ready Hugo or Gatsby – but we'll see. We'll see.
Anyway, this fourth dimension I had 2 issues with WordPress – both related to Yoast! SEO -plugin'southward How-to -blocks. The plugin itself is pretty good for creating structured information blocks, like How-tos, but information technology has come across occasional hiccups.
The first result is surfaced in Google Search Console. All of a sudden, a page with Yoast! The How-to-block is missing all "steps". That looks similar this:
Odd! I'm using the cake for the reason that it makes getting the data structure correct hands. It shouldn't permit you to create any how-tos without whatever steps…
And it simply gets weirder: The second issue arises when you lot try to set up the page by opening information technology in edit-mode – like such:
This makes the upshot incommunicable to fix! If an outcome even exists, as the page looks just fine.
So – what gives?
Problem
Looking more closely into the errors in the console, these are the stacks I was faced with – I am involving them here for your reference, perhaps you're running into something similar:
TypeError: Cannot read property 'map' of undefined at u (structured-data-blocks-1602.js:ane) at Wt (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3) at Qt (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:iii) at block-editor.min.js?ver=7bc2f41a2f2e0da426f12f29b2139cae:12 at hooks.min.js?ver=50e23bed88bcb9e6e14023e9961698c1:ii at $r (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3) at blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3 at Ur (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3) at blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:iii at Array.reduce (<anonymous>) Another fault:
react.min.js?ver=16.xiii.one:24 Uncaught TypeError: Cannot read holding 'map' of undefined at u (structured-data-blocks-1602.js:1) at Wt (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3) at Qt (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3) at block-editor.min.js?ver=7bc2f41a2f2e0da426f12f29b2139cae:12 at hooks.min.js?ver=50e23bed88bcb9e6e14023e9961698c1:two at $r (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:three) at blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3 at Ur (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3) at blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3 at Array.reduce (<bearding>) And yet another ane:
structured-information-blocks-1602.js:i Uncaught (in promise) TypeError: Cannot read property 'map' of undefined at u (structured-data-blocks-1602.js:ane) at Wt (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3) at Qt (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3) at cake-editor.min.js?ver=7bc2f41a2f2e0da426f12f29b2139cae:12 at hooks.min.js?ver=50e23bed88bcb9e6e14023e9961698c1:2 at $r (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:iii) at blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3 at Ur (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:three) at blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3 at Array.reduce (<anonymous>) So it looks like it's a block'south content within the cake editor (Gutenberg) causing the outcome – namely, structured-data-blocks.js, which is a file, Yoast! SEO plugin uses to course their Structured Data Blocks, such as How-to and FAQ.
I speedily opened a few other posts of mine to see if the issue was widespread – perhaps something had messed up my whole site? Simply no – it was just this one folio.
So… What happened?
Reason
After a quick investigation, I found a few different problems in the page'due south HTML/JSON, especially the wp:yoast/how-to-block's JSON.
Namely, a file path had been "exploded" into a tree structure with a weirdly uncodified and likely badly nested piece of garbage. Nesting seems to accept been done because part of the file path being stylized every bit bold, I'grand guessing that'southward a part of the issue.
Running the JSON through a validator acquired a ton of validation issues. It seems clear the information in the database somehow got garbled.
Alright. A agglomeration of things cleaved. No way to access the editor, non even in the code view. How to fix this, and then?
Solution
Okay – and then ironically, I'm going to get through the proper steps in yet some other Yoast! How-to-section below 😄 This should reveal that I figured out how to set this, right? 😉
Well, until information technology breaks again, that is.
Fourth dimension needed:30 minutes.
How to fix Yoast! SEO How-to cake-breaking your Gutenberg editor?
- Notice out the ID of your cleaved page
If you already opened your page in edit mode, y'all can only grab the ID from the URL (even if the page never loaded):
- Log in to phpMyAdmin
… or any other database administration tool that'll let you edit your database.
- Edit the row for your failing page
At present you'll need the ID from before. Run the SQL script below in your database administration tool:
SELECT * FROM wordpress_posts WHERE ID Similar 8813Then hitting "Edit" (see below)
- Verify your JSON
Find the how-to -block, and copy the JSON (the part inside { } -characters) from information technology.
Example below:
Paste this into an online JSON validator to run across which parts are broken. The one that I used is linked below. Remember to uncheck the "Fix JSON" -checkbox, otherwise you won't uncover all problems you might have!
https://jsonformatter.curiousconcept.com/ - Fix the problems in JSON and re-validate
In my instance, a file path had, for any reason, been saved without being escaped and instead turned into Unicode-ish garbage.
The validator didn't like that:
Now you lot'll have two options: either remove the offending block from the database (later on which the page should open up successfully in edit style) and recreate it manually or if the validator simply gives a few errors, set the JSON directly.
I ended upward going with the latter option.
- When your JSON is valid, paste information technology back
This took a few tries to become right, as I had multiple file paths and too suck at escaping things manually. Simply eventually, the validator was happy:
So I overwrote the function I had selected in phpMyAdmin and saved the changes by selecting "Salve" and then "Go" from the bottom of the page.
- Et voilà ! It works!
What a stupid fix, once again.
One would promise issues similar these wouldn't pop up when using broadly adopted tools like WordPress and Yoast – but hey, I guess you lot get what you pay for, right? 😉
So, that was i fix to a very particular issue. Did information technology assistance you? Let me know in the comments section below!
- Writer
- Recent Posts
Antti Koskela is a proud digital native nomadic millennial full stack developer (is that enough funny buzzwords? That's definitely plenty funny buzzwords!), who works as a Cloud Solutions Architect for Etteplan Oyj, an applied science company that employs something similar 700 devs building and fixing anything even half-digital.
He'due south been a programmer from 2004 (starting with PHP and Java), and he's been working on .Cyberspace projects, Azure, Office 365, SharePoint and a lot of other stuff. He'south also Microsoft MVP for Part Development.
This is his personal professional person (e.one thousand. professional, but definitely personal) blog.
Source: https://www.koskila.net/how-to-fix-cannot-read-property-map-of-undefined-structured-data-blocks/
0 Response to "Typeerror: Cannot Read Property 'map' of Null"
Post a Comment