Shopware Plugin: Facing error while updating Shopware plugin 6.4 compatible with v6.5

I have a Shopware plugin that is not yet compatible with the recently released v6.5. I am facing errors in the index.js and temp.html.twig files located in the directory src/Administration/Resources/app/administration/src/app/component/temp.

My index.js file:

// import template from './temp-select.html.twig';

const { Component, Context } = Shopware;
const { EntityCollection, Criteria } = Shopware.Data;
const { types, get } = Shopware.Utils;

Component.extend('temp-select', 'sw-single-select', {

    inject: [
        'repositoryFactory'
    ],

    computed: {
        singleSelection: {
            get() {
                if(this.options && Array.isArray(this.options)){
                    return this.options.find(option => {
                        return this.getKey(option, this.valueProperty) === this.currentValue;
                    });
                }
                return false;
            },
        },
    },

    created() {

        this.lastValue = this.currentValue;
        this.loadOptions();
        this.loadValueName();

    },

    updated(){
        if(this.lastValue != this.currentValue){
            this.loadOptions();
            this.loadValueName();
            this.lastValue = this.currentValue;
        }
    },

    methods: {

        getRepository(){

            if(!this.repository){
                if (this.$attrs.name == 't_temp_google_id'){
                    this.repository = this.createRepository('t_temp_google');
                }else if (this.$attrs.name == 't_temp_facebook_id'){
                    this.repository = this.createRepository('t_temp_facebook');
                }else{
                    throw new Error('tanmar_taxonomy: unknown attr/repository name');
                }
            }
            return this.repository;
        },

        loadOptions(){

            const criteria = new Criteria();
            //criteria.setPage(1);
            //criteria.setLimit(10);

            criteria.addSorting(Criteria.sort('name', 'ASC', false));

            this.getRepository().search(criteria, Shopware.Context.api).then(res => {
                res.forEach(element => {
                    element.label = element.name;
                    element.value = element.tax_id;
                });
                this.options = res;
                this.results = this.options;
            });
        },

        loadValueName() {
            this.isExpanded = false;
            this.searchTerm = '';

            if(!!this.currentValue){

                this.isExpanded = true;
                this.searchTerm = this.currentValue;

                const getCriteria = new Criteria();
                getCriteria.addFilter(Criteria.equals('tax_id', this.currentValue));

                this.getRepository().search(getCriteria, Shopware.Context.api).then(res => {
                    res.forEach(element => {
                        element.label = element.name;
                        element.value = element.tax_id;

                        this.isExpanded = true;
                        this.searchTerm = element.label + ' (' + element.tax_id + ')';
                    });

                });
            }
        },

        createRepository(entity) {
            if (types.isUndefined(entity)) {
                throw new Error('sw-form-field-renderer - sw-entity-multi-id-select component needs entity property');
            }

            return this.repositoryFactory.create(entity);
        },

        setValue(item) {
            this.itemRecentlySelected = true;
            this.singleSelection = item;
            this.closeResultList();

            this.currentValue = item.tax_id;
            this.value = item.tax_id;

            this.isExpanded = true;
            this.searchTerm = item.label + ' (' + item.tax_id + ')';
        },

        search() {
            this.$emit('search', this.searchTerm);

            if (this.disableSearchFunction) {
                return;
            }

            const criteria = new Criteria();
            criteria.addFilter(
                Criteria.contains('name', this.searchTerm)
            );
            criteria.addSorting(Criteria.sort('name', 'ASC', false));

            this.getRepository().search(criteria, Shopware.Context.api).then(res => {
                res.forEach(element => {
                    element.label = element.name;
                    element.value = element.tax_id;
                });
                this.results = res;
                this.resetActiveItem();
            });

            this.$nextTick(() => {
                this.resetActiveItem();
            });
        },

        onSelectExpanded() {
            this.isExpanded = true;
            // Always start with a fresh list when opening the result list
            this.results = this.options;

            if(!this.results){
                this.loadOptions();
            }

            // Get the search text of the selected item as prefilled value
            this.searchTerm = this.tryGetSearchText(this.singleSelection);

            this.$nextTick(() => {
                this.resetActiveItem();
                this.$refs.swSelectInput.select();
                this.$refs.swSelectInput.focus();
            });

        },

    },

});

My temp.html.twig file:


{% block sw_single_select %}
    {% parent %}
{% endblock %}

Specifically, I’m getting the following errors:

  • The global variable “Shopware” is not declared
  • Expected indent but found this } const { types, get } = Shopware.Utils;

It seems like the necessary Shopware 6 objects are not being imported and initialized correctly.

Any help would be greatly appreciated.

Regards,