Dynamically defined components fail rehydration

[verystack]

Describe the bug
Anonymous function components defined at runtime are able to be used with Craft.js, but on hydration from saved data, they fail to be re-mapped.

To Reproduce
Create a Craft.js component dynamically, save to data-store, try to re-hydrate later.

                const fn = (props) => {
                                    const { connectors: { connect }, actions: { setProp }, propValue } = useNode((node) => ({propValue: node.data.props}));

                    const { enabled } = useEditor((state) => ({ enabled: state.options.enabled }));
                    let editorProps = parseAttributes(attributes)(props, setProp, enabled)("editorProps");

                    return (<ErrorBoundary FallbackComponent={ErrorFallback}>
                        {React.cloneElement(child, {ref: connect, ...editorProps})}
                    </ErrorBoundary>)
                }

                fn.craft = {
                    displayName: name.replaceAll(/\s/g,''),
                    props: {},
                };

Results in an invariant error along the lines of:

Invariant failed: An Error occurred while deserializing components: Cannot find component <CallToAction /> in resolver map. Please check your resolver in <Editor /> Available components in resolver: Base, AnimatedBanner, CallToAction

Expected behavior
Craft.js should use the Key for a component in the resolver, not the function name as currently happens. Otherwise, Craft.js should make it explicitly clear that anonymous functions cannot be used within the resolver and check for this.

Your environment

Software	Version(s)
craft.js	0.1.0-beta.20
React	17.0.2
Browser	Opera
Operating System	Windows

[joomaiotrung]

any thing update?

[ancyloce]

Invariant failed: An Error occurred while deserializing components: Cannot find component <CallToAction /> in resolver map. Please check your resolver in <Editor /> Available components in resolver: Base, AnimatedBanner, CallToAction

resolver not Base, AnimatedBanner, CallToAction

like this:

<Editor resolver={{Base, AnimatedBanner, CallToAction}} />