Required slot configuration error CMS-element

Question

When i'm trying to create a custom CMS-element and i drag it into a shopping experience, the console gives the following message:

app.js?16675756916926524:1 An error was captured in current module: TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at s.checkRequiredSlotConfigField (app.js?16675756916926524:1:1502672)
    at app.js?16675756916926524:1:1499742
    at Array.forEach (<anonymous>)
    at app.js?16675756916926524:1:1499450
    at Array.forEach (<anonymous>)
    at app.js?16675756916926524:1:1499398
    at Array.forEach (<anonymous>)
    at s.getSlotValidations (app.js?16675756916926524:1:1499368)
    at s.slotValidation (app.js?16675756916926524:1:1501429)

However, i can't find what i am doing wrong. My index.js contains the following code:

import './component';
import './preview';

Shopware.Service('cmsService').registerCmsBlock({
    name: 'name',
    category: 'text',
    label: 'label',
    component: 'sw-cms-block-name',
    previewComponent: 'sw-cms-preview-name',
    defaultConfig: {
       marginBottom: '20px',
       marginTop: '20px',
       marginLeft: '20px',
       marginRight: '20px',
       sizingMode: 'boxed'
    },
    slots: {
        left: 'text',
        right: 'image'
    }
});

Does anyone have any idea how to fix this error..?

I tried changing the config to the shopware example as mentioned in https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-block However, it still gives the same error..

Answer 1

Does your component sw-cms-block-name exist? Also that component's template must declare the slots you register with the cms block:

<div class="sw-cms-block-name">
    <slot name="left"></slot>
    <slot name="right"></slot>
</div>

When defining the slots you can also pass a config with default settings and content:

slots: {
    left: {
        type: 'text',
        default: {
            config: {
                content: { source: 'static', value: 'lorem ipsum' },
            },
        },
    },
    right: {
        type: 'image',
        default: {
            config: {
                displayMode: { source: 'static', value: 'cover' },
            },
        },
    },
},