Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FlatTermSelector crashes editor: Can't access property "map", terms is null #41095

Closed
peterwilsoncc opened this issue May 17, 2022 · 4 comments · Fixed by #41099
Closed

FlatTermSelector crashes editor: Can't access property "map", terms is null #41095

peterwilsoncc opened this issue May 17, 2022 · 4 comments · Fixed by #41099
Assignees
@Mamaduka
Labels
General Interface Parts of the UI which don't fall neatly under other labels. [Type] Bug An existing feature does not function as intended

Comments

@peterwilsoncc
Copy link
Contributor

Description

In some circumstances the FlatTermSelector component can crash the editor with the error Uncaught TypeError: can't access property "map", terms is null.

The line throwing the error is

gutenberg/packages/editor/src/components/post-taxonomies/flat-term-selector.js

Lines 180 to 182 in d602f50

const newValues = terms.map( ( term ) =>
unescapeString( term.name )
);

I am only seeing it intermittently but it appears to happen with a registered terms REST API endpoint returns an unexpected result.

In my case a request to /wp-json/wp/v2/taxonomies?context=edit&per_page=100&_locale=user includes a reference to a taxonomy endpoint that subsequently throws a 404 error. Eg /wp-json/wp/v2/some-custom-taxo?context=view&per_page=100&orderby=count&order=desc&_fields=id%2Cname&include=21%2C26&_locale=user throws a 404.

I suspect FlatTermSelector requires a logic check to ensure the terms endpoint returns expected data before processing it.

Step-by-step reproduction instructions

TBA

I'm still working on reproducing this with a plugin consistently. I'm only getting intermittent errors at the moment.

Screenshots, screen recording, code snippet

Error messages

Uncaught TypeError: can't access property "map", terms is null
    FlatTermSelector https://example.com/wp-includes/js/dist/editor.js?ver=21112b08bb13e5a735daec50db12187d:8829
    invokePassiveEffectCreate https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23517
    callCallback https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:3942
    invokeGuardedCallbackDev https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:3991
    invokeGuardedCallback https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:4053
    flushPassiveEffectsImpl https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23604
    unstable_runWithPriority https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2764
    runWithPriority$1 https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:11306
    flushPassiveEffects https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23477
    commitBeforeMutationEffects https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23354
    workLoop https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2713
    flushWork https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2686
    performWorkUntilDeadline https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2453
    EventHandlerNonNull* https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2476
    <anonymous> https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:12
    <anonymous> https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:13
editor.js:8829:25
    FlatTermSelector https://example.com/wp-includes/js/dist/editor.js?ver=21112b08bb13e5a735daec50db12187d:8829
    invokePassiveEffectCreate https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23517
    callCallback https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:3942
    invokeGuardedCallbackDev https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:3991
    invokeGuardedCallback https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:4053
    flushPassiveEffectsImpl https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23604
    unstable_runWithPriority https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2764
    runWithPriority$1 https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:11306
    flushPassiveEffects https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23477
    commitBeforeMutationEffects https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23354
    workLoop https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2713
    flushWork https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2686
    performWorkUntilDeadline https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2453
    (Async: EventHandlerNonNull)
    <anonymous> https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2476
    <anonymous> https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:12
    <anonymous> https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:13

The above error occurred in the <FlatTermSelector> component:

FlatTermSelector@https://example.com/wp-includes/js/dist/editor.js?ver=21112b08bb13e5a735daec50db12187d:8772:7
FilteredComponentRenderer@https://example.com/wp-includes/js/dist/components.js?ver=704ed65a1b8b5c891184113526f15ce4:73834:9
div
PanelBody@https://example.com/wp-includes/js/dist/components.js?ver=704ed65a1b8b5c891184113526f15ce4:68723:7
TaxonomyPanel@https://example.com/wp-includes/js/dist/edit-post.js?ver=0066e2a76eff88129280c12c9a52b6b4:6725:7
withDispatch/</<@https://example.com/wp-includes/js/dist/data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:4316:46
withSelect/</<@https://example.com/wp-includes/js/dist/data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:4160:31
@https://example.com/wp-includes/js/dist/compose.js?ver=da94d523b115836ddbf0b3b774ddd94a:2244:10
PostTaxonomies@https://example.com/wp-includes/js/dist/editor.js?ver=21112b08bb13e5a735daec50db12187d:10542:7
withSelect/</<@https://example.com/wp-includes/js/dist/data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:4160:31
@https://example.com/wp-includes/js/dist/compose.js?ver=da94d523b115836ddbf0b3b774ddd94a:2244:10
PostTaxonomiesCheck@https://example.com/wp-includes/js/dist/editor.js?ver=21112b08bb13e5a735daec50db12187d:10591:7
withSelect/</<@https://example.com/wp-includes/js/dist/data.js?ver=38ad563aa39c8f314fe6f6e430d81a69:4160:31
@https://example.com/wp-includes/js/dist/compose.js?ver=da94d523b115836ddbf0b3b774ddd94a:2244:10
PostTaxonomies
div
Panel@https://example.com/wp-includes/js/dist/components.js?ver=704ed65a1b8b5c891184113526f15ce4:68662:7
div
SlotComponent@https://example.com/wp-includes/js/dist/components.js?ver=704ed65a1b8b5c891184113526f15ce4:22182:5
Slot
slot_fill_Slot<@https://example.com/wp-includes/js/dist/components.js?ver=704ed65a1b8b5c891184113526f15ce4:22830:7
ComplementaryAreaSlot@https://example.com/wp-includes/js/dist/edit-post.js?ver=0066e2a76eff88129280c12c9a52b6b4:1367:7
div
div
div
div
InterfaceSkeleton@https://example.com/wp-includes/js/dist/edit-post.js?ver=0066e2a76eff88129280c12c9a52b6b4:1611:7
Layout@https://example.com/wp-includes/js/dist/edit-post.js?ver=0066e2a76eff88129280c12c9a52b6b4:8670:7
ErrorBoundary@https://example.com/wp-includes/js/dist/editor.js?ver=21112b08bb13e5a735daec50db12187d:5669:5
BlockRefsProvider@https://example.com/wp-includes/js/dist/block-editor.js?ver=2dba0edf224f27a3d86f9fd139c0f350:9764:7
BlockEditorProvider@https://example.com/wp-includes/js/dist/block-editor.js?ver=2dba0edf224f27a3d86f9fd139c0f350:19398:7
withRegistryProvider</<@https://example.com/wp-includes/js/dist/block-editor.js?ver=2dba0edf224f27a3d86f9fd139c0f350:19098:9
WithRegistryProvider(BlockEditorProvider)
BlockContextProvider@https://example.com/wp-includes/js/dist/block-editor.js?ver=2dba0edf224f27a3d86f9fd139c0f350:12861:7
EntityProvider@https://example.com/wp-includes/js/dist/core-data.js?ver=95df951bbac4c9f2fd2e6da80561595d:5574:7
EntityProvider@https://example.com/wp-includes/js/dist/core-data.js?ver=95df951bbac4c9f2fd2e6da80561595d:5574:7
EditorProvider@https://example.com/wp-includes/js/dist/editor.js?ver=21112b08bb13e5a735daec50db12187d:11575:7
withRegistryProvider</<@https://example.com/wp-includes/js/dist/editor.js?ver=21112b08bb13e5a735daec50db12187d:11346:7
WithRegistryProvider(EditorProvider)
SlotFillProvider@https://example.com/wp-includes/js/dist/components.js?ver=704ed65a1b8b5c891184113526f15ce4:22666:7
provider_SlotFillProvider@https://example.com/wp-includes/js/dist/components.js?ver=704ed65a1b8b5c891184113526f15ce4:22693:5
Provider@https://example.com/wp-includes/js/dist/components.js?ver=704ed65a1b8b5c891184113526f15ce4:22844:7
div
ShortcutProvider@https://example.com/wp-includes/js/dist/keyboard-shortcuts.js?ver=418fddac042f08102c4110f70e13cd47:763:75
Editor@https://example.com/wp-includes/js/dist/edit-post.js?ver=0066e2a76eff88129280c12c9a52b6b4:8955:7

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. react-dom.js:20115:17
    logCapturedError https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:20115
    callback https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:20184
    callCallback https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:12348
    commitUpdateQueue https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:12369
    commitLifeCycles https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:20739
    commitLayoutEffects https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23456
    callCallback https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:3942
    invokeGuardedCallbackDev https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:3991
    invokeGuardedCallback https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:4053
    commitRootImpl https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23181
    unstable_runWithPriority https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2764
    runWithPriority$1 https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:11306
    commitRoot https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23020
    performSyncWorkOnRoot https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:22359
    flushSyncCallbackQueueImpl https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:11357
    unstable_runWithPriority https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2764
    runWithPriority$1 https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:11306
    flushSyncCallbackQueueImpl https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:11352
    flushSyncCallbackQueue https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:11339
    flushPassiveEffectsImpl https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23650
    unstable_runWithPriority https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2764
    runWithPriority$1 https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:11306
    flushPassiveEffects https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23477
    commitBeforeMutationEffects https://example.com/wp-includes/js/dist/vendor/react-dom.js?ver=17.0.1:23354
    workLoop https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2713
    flushWork https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2686
    performWorkUntilDeadline https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2453
    (Async: EventHandlerNonNull)
    <anonymous> https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:2476
    <anonymous> https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:12
    <anonymous> https://example.com/wp-includes/js/dist/vendor/react.js?ver=17.0.1:13

Environment info

  • WordPress 6.0 RC 2
  • Gutenberg inactive
  • Browser: Firefox Developer Edition 101

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes
@peterwilsoncc peterwilsoncc mentioned this issue May 17, 2022
Closed
6 tasks
@Mamaduka Mamaduka added [Type] Bug An existing feature does not function as intended General Interface Parts of the UI which don't fall neatly under other labels. labels May 17, 2022
@Mamaduka Mamaduka self-assigned this May 17, 2022
@glendaviesnz
Copy link
Contributor

glendaviesnz commented May 17, 2022 •
edited
Loading

@Mamaduka - I just did a quick test of a potential fix for this before noticing you had assigned it to yourself - PR of fix here if you haven't already put something up - feel free to use

@Mamaduka
Copy link
Member

@glendaviesnz, I started in a slightly different direction, but I am happy to push my changes on your branch or create a separate PR. Whichever works for you the best :)

@glendaviesnz
Copy link
Contributor

@glendaviesnz, I started in a slightly different direction, but I am happy to push my changes on your branch or create a separate PR. Whichever works for you the best :)

Mine was a very quick initial explore - have closed the PR, so just go for it with your solution 😃

@Mamaduka Mamaduka mentioned this issue May 17, 2022
Merged
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label May 17, 2022
@peterwilsoncc
Copy link
Contributor Author

Thanks for fixing this so quickly folks, three or four hours is a really impressive turn-around ;)

@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label May 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Mamaduka Mamaduka

Labels
General Interface Parts of the UI which don't fall neatly under other labels. [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

FlatTermSelector: Avoid errors when returned terms aren't iterable WordPress/gutenberg
4 participants
@Mamaduka @peterwilsoncc @glendaviesnz @priethor