Shopware 6自定义CMS元素注册异常：Vue报错求助（附代码）

架构老林

2026-8-15

问题分析与解决：Shopware 6自定义CMS元素及区块报错

问题背景

使用Shopware 6 Toolbox插件创建自定义CMS元素后，添加包含该元素的自定义CMS区块时，出现以下Vue警告与错误：

警告1：未知自定义组件`<SwCmsBlockGalleryInfobox>`

vue.esm.js?a026:628 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> < SwCmsBlockGalleryInfobox >
< SwCmsBlock >
< SwCmsSection >
< SwPage >
< SwCmsDetail >
< SwErrorBoundary>
< SwDesktop>
< SwAdmin>
< Root>

警告2：缺失必填prop "element"

vue.esm.js?a026:628 [Vue warn]: Missing required prop: "element"
found in
---> < SwCmsElComponentInfoBox>
< SwCmsBlockGalleryInfobox>
< SwCmsBlock>
< SwCmsSection>
< SwPage>
< SwCmsDetail>
< SwErrorBoundary>
< SwDesktop>
< SwAdmin>
< Root>

错误：无法设置undefined的属性"config"

An error was captured in current module: TypeError: Cannot set properties of undefined (setting 'config')
at VueComponent.initElementConfig (sw-cms-element.mixin.js?7948:64:13)
at VueComponent.createdComponent (index.js?7f82:19:18)
at VueComponent.created (index.js?7f82:14:14)
at invokeWithErrorHandling (vue.esm.js?a026:1872:1)
at callHook (vue.esm.js?a026:4244:1)
at Vue._init (vue.esm.js?a026:5031:1)
at new VueComponent (vue.esm.js?a026:5177:1)
at createComponentInstanceForVnode (vue.esm.js?a026:3313:1)
at init (vue.esm.js?a026:3142:1)
at createComponent (vue.esm.js?a026:6033:1)

用户已对比官方教程文件未发现差异，且未修改生成的CMS元素，询问报错原因。

相关代码片段

main.js

// plugins/ProductInfoBox/src/Resources/app/administration/src/main.js
import './module/sw-cms/blocks/commerce/gallery-infobox';
import './module/sw-cms/elements/info-box';

自定义元素注册文件

// plugins/ProductInfoBox/src/Resources/app/administration/src/module/sw-cms/elements/info-box/index.js
import './component';
import './config';
import './preview';

Shopware.Service('cmsService').registerCmsElement({
    name: 'info-box',
    label: 'sw-cms.elements.info-box.label',
    component: 'sw-cms-el-component-info-box',
    configComponent: 'sw-cms-el-config-info-box',
    previewComponent: 'sw-cms-el-preview-info-box',
    defaultConfig: {
        content: {
            source: 'static',
            value: `
                <h2>Lorem Ipsum dolor sit amet</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                At vero eos et accusam et justo duo dolores et ea rebum.
                Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            `.trim(),
        },
        verticalAlign: {
            source: 'static',
            value: null,
        },
    },
    defaultData: {}
});

元素组件文件

// plugins/ProductInfoBox/src/Resources/app/administration/src/module/sw-cms/elements/info-box/component/index.js
import template from './sw-cms-el-component-info-box.html.twig';
import './sw-cms-el-component-info-box.scss';

const {Component, Mixin} = Shopware;

Component.register('sw-cms-el-component-info-box', {
    template,

    mixins: [
        Mixin.getByName('cms-element')
    ],

    computed: {
        getText(){
            return this.element.config.content.value;
        }
    },

    created() {
        this.createdComponent();
    },

    methods: {
        createdComponent() {
            this.initElementConfig('info-box');
            this.initElementData('info-box');
        },
    },
});

元素配置组件文件

// plugins/ProductInfoBox/src/Resources/app/administration/src/module/sw-cms/elements/info-box/config/index.js
import template from './sw-cms-el-config-info-box.html.twig';
import './sw-cms-el-config-info-box.scss';

const {Component, Mixin} = Shopware;

Component.register('sw-cms-el-config-info-box', {
    template,

    inject: ['repositoryFactory'],

    mixins: [
        Mixin.getByName('cms-element')
    ],

    computed: {
        getText(){
            return this.element.config.content.value;
        }
    },

    created() {
        this.createdComponent();
    },

    methods: {
        createdComponent() {
            this.initElementConfig('info-box');
        },

    },
});

元素预览组件文件

// plugins/ProductInfoBox/src/Resources/app/administration/src/module/sw-cms/elements/info-box/preview/index.js
import template from './sw-cms-el-preview-info-box.html.twig';
import './sw-cms-el-preview-info-box.scss';

const {Component} = Shopware;

Component.register('sw-cms-el-preview-info-box', {
    template
});

问题原因与解决方案

1. 未知自定义组件`<SwCmsBlockGalleryInfobox>`警告

原因：自定义CMS区块gallery-infobox的Vue组件未正确注册，或区块注册代码存在问题。

解决步骤：

检查blocks/commerce/gallery-infobox/index.js文件，确保已调用Component.register('sw-cms-block-gallery-infobox', {...})完成组件注册
确认区块组件名称与模板中使用的标签名匹配（Shopware遵循kebab-case转PascalCase规则，sw-cms-block-gallery-infobox对应<SwCmsBlockGalleryInfobox>）
确保区块注册代码已被正确导入到main.js中

2. 缺失必填prop "element"警告

原因：自定义区块模板中渲染info-box元素时，未传递element属性。

解决步骤：
在区块的Twig模板中，确保渲染CMS元素时传入element对象，示例：

{% block sw_cms_block_gallery_infobox %}
    <div class="sw-cms-block-gallery-infobox">
        <sw-cms-el-component-info-box :element="elements['info-box']"></sw-cms-el-component-info-box>
    </div>
{% endblock %}

同时在区块注册代码中，需正确定义区块结构，确保slots配置包含info-box元素实例。

3. Cannot set properties of undefined (setting 'config')错误

原因：手动调用initElementConfig时，组件的element对象尚未初始化，导致this.element为undefined。

解决步骤：
Shopware的cms-element mixin已自动处理初始化逻辑，手动调用会导致重复初始化且时机错误，需移除相关代码：

修改后的元素组件文件：

import template from './sw-cms-el-component-info-box.html.twig';
import './sw-cms-el-component-info-box.scss';

const {Component, Mixin} = Shopware;

Component.register('sw-cms-el-component-info-box', {
    template,
    mixins: [Mixin.getByName('cms-element')],
    computed: {
        getText(){
            return this.element.config.content.value;
        }
    }
});

修改后的元素配置组件文件：

import template from './sw-cms-el-config-info-box.html.twig';
import './sw-cms-el-config-info-box.scss';

const {Component, Mixin} = Shopware;

Component.register('sw-cms-el-config-info-box', {
    template,
    inject: ['repositoryFactory'],
    mixins: [Mixin.getByName('cms-element')],
    computed: {
        getText(){
            return this.element.config.content.value;
        }
    }
});

额外检查点

确认自定义区块注册代码中正确关联info-box元素，示例：

Shopware.Service('cmsService').registerCmsBlock({
    name: 'gallery-infobox',
    label: 'sw-cms.blocks.commerce.gallery-infobox.label',
    category: 'commerce',
    component: 'sw-cms-block-gallery-infobox',
    previewComponent: 'sw-cms-block-preview-gallery-infobox',
    defaultConfig: {
        marginBottom: '20px',
        marginTop: '20px',
        marginLeft: '20px',
        marginRight: '20px',
        sizingMode: 'boxed'
    },
    slots: {
        default: {
            type: 'info-box',
            default: {
                config: {
                    content: {value: '默认内容'}
                }
            }
        }
    }
});

清理Shopware缓存，重新构建前端资源（执行bin/build-administration.sh或psh.phar administration:build）

内容的提问来源于stack exchange，提问作者NixH

Shopware 6自定义CMS元素注册异常：Vue报错求助（附代码）

问题背景 #

警告1：未知自定义组件<SwCmsBlockGalleryInfobox> #

警告2：缺失必填prop "element" #

错误：无法设置undefined的属性"config" #

相关代码片段 #

main.js #

自定义元素注册文件 #

元素组件文件 #

元素配置组件文件 #

元素预览组件文件 #

问题原因与解决方案 #

1. 未知自定义组件<SwCmsBlockGalleryInfobox>警告 #

2. 缺失必填prop "element"警告 #

3. Cannot set properties of undefined (setting 'config')错误 #

额外检查点 #