Gutenberg: useSelect returns undefined instead of trow an error when mapSelect trows

Created on 8 Feb 2020  路  11Comments  路  Source: WordPress/gutenberg

Hi, i'm trying to make custom gutenberg block with predefined layout selection. So i've used 'core/column' & 'core/columns' as start point.

But now i'm facing a problem, when i try to create a block of 'gutenberg-modules/columns' i'm getting following error in a console:

TypeError: Cannot read property 'blockType' of undefined at ColumnsEdit (edit.js:214) ...

So, this function implemented just as original one and contains following code:
````javascript
const {
blockType,
defaultVariation,
hasInnerBlocks,
variations,
} = useSelect(
(select) => {
const {
__experimentalGetBlockVariations,
getBlockType,
__experimentalGetDefaultBlockVariation,
} = select('core/blocks');

return {
    blockType: getBlockType(name),
    defaultVariation: __experimentalGetDefaultBlockVariation(
        name,
        'block'
    ),
    hasInnerBlocks:
        select('core/block-editor').getBlocks(clientId).length >
        0,
        variations: __experimentalGetBlockVariations(name, 'block'),
    };
},
[clientId, name]

);
``` As i mentioned,(select) => {...}` works just fine and returns correct data, but useSelect returns undefined by itself.

Full code can be found here

[Package] Data [Status] In Progress [Type] Bug

All 11 comments

Hi @epiqueras, @youknowriad any idea of why useSelect may be returning undefined in this case?

name is probably not what you expect.

@epiqueras name = gutenberg-modules/columns, should I expect something else?

Something in the function passed to useSelect is making it throw. Try
guarding property accesses and singling out selector calls.

Something in the function passed to useSelect is making it throw. Try
guarding property accesses and singling out selector calls.

Thank you for the insights, it seems this is the most probable cause.

But I think we have a bug in useSelect, if an error is thrown in the function passed to useSelect that error should be noticeable to the developer.
We have logic for that:
https://github.com/WordPress/gutenberg//blob/4857ad58c1241b3d63d21a6880c989b85746c3dc/packages/data/src/components/use-select/index.js#L99-L118

But that logic does not seems to work, In my tests when I made something inside useSelect break the error I got was similar to the error @mevepe got. The error was because useSelect returned undefined, not because something inside useSelect trowed an error.
cc: @nerrad in case you have some additional insights.

Look like its __experimentalGetDefaultBlockVariation, i've removed destruct part and got real error: backend.js:6 Error: An error occurred while running 'mapSelect': __experimentalGetDefaultBlockVariation is not a function

This is the expected behavior. It鈥檚 logic for protecting against zombie
child updates. It鈥檚 only an issue here because the error is being thrown in
the first call.

Perhaps a nicer error message for these specific cases would be good.

Hi @mevepe, __experimentalGetDefaultBlockVariation now is a stable API, you can use getDefaultBlockVariation.

@jorgefilipecosta cool!
Thanks for help everyone, should I close this issue?

Thanks for help everyone, should I close this issue?

I think we can keep the issue open as If useSelect allows the error to pass out it would be easy to understand the problem.

20122

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jasmussen picture jasmussen  路  3Comments

nylen picture nylen  路  3Comments

spocke picture spocke  路  3Comments

youknowriad picture youknowriad  路  3Comments

mhenrylucero picture mhenrylucero  路  3Comments