Added tab in my custom module's details page but the content does not show

Shopware 6 (English)
1

I have added a custom tab on my module’s details page, however, the tab is rendered but the content for the tab isn’t showing. There isn’t any error in the logs as well.

Here I am sahring code

index.js

import './page/wt-shopfinder-list';
import './page/wt-shopfinder-detail';

import './view/wt-shopfinder-detail-base';

const { Module } = Shopware;

Module.register('webbytroops-shopfinder', {
    type: 'plugin',
    name: 'WebbytroopsShopFinder',
    title: 'webbytroops-shopfinder.general.mainMenuItemGeneral',
    description: 'webbytroops-shopfinder.general.descriptionTextModule',
    version: '1.0.0',
    targetVersion: '1.0.0',
    color: '#9AA8B5',
    icon: 'default-shopping-paper-bag',
    entity:'wt_shop_finder',
    routes: {
        index: {
            components: {
                default: "wt-shopfinder-list"
            },
            path: 'index',
            
        },
        detail: {
            component: 'wt-shopfinder-detail',
            path: 'detail/:id',
            redirect: {
                name: 'webbytroops.shopfinder.detail.base',
            },
            children: {
                base: {
                    component: 'wt-shopfinder-detail-base',
                    path: 'base',
                    meta: {
                        parentPath: 'webbytroops.shopfinder.index',
                        privilege: 'wtshoppfinder.viewer',
                    },
                },
            },
            meta: {
                privilege: 'wtshopfinder.viewer',
                appSystem: {
                    view: 'detail',
                },
            },
            props: {
                default: (route) => {
                    return {
                        shopFinderId: route.params.id,
                    };
                },
            },
        }
    },
    
    navigation: [{
        id: 'wt-shopfinder',
        label: 'webbytroops-shopfinder.menu.mainMenuItemGeneral',
        color: '#ff3d58',
        icon: 'default-shopping-paper-bag-product',
        path: 'webbytroops.shopfinder.index',
        parent: "sw-marketing",
        position: 100,
    }],
});

<sw-tabs
                class="wt_shopfinder-detail-page__tabs"
                position-identifier="wt-shopfinder-detail"
            >
                {% block wt_shopfinder_detail_content_tabs_general %}
                <sw-tabs-item
                    :route="generalRoute"
                    :title="$tc('sw-customer.detail.tabGeneral')"
                    :disabled="false"
                >
                    {{ $tc('sw-promotion-v2.detail.tabs.tabGeneral') }}
                </sw-tabs-item>
                {% endblock %}
                {% block wt_shopfinder_detail_content_tabs_general2 %}
                <sw-tabs-item
                    :route="reviewRoute"
                    :title="$tc('sw-customer.detail.tabGeneral')"
                    :disabled="false"
                >
                    Review
                </sw-tabs-item>
                {% endblock %}
            </sw-tabs>

index.js file for details

generalRoute() {
            return {
                name: 'webbytroops.shopfinder.detail.base',
                params: { id: this.shopFinderId },
//                query: { edit: this.editMode },
            };
        },

wt-shopfinder-detail-base/index.js

import template from './wt-shopfinder-detail-base.html.twig';

const { Component } = Shopware;
const { Criteria } = Shopware.Data;

Component.register('wt-shopfinder-detail-base', {
    template,
    
    inject: ['repositoryFactory'],
    
    metaInfo() {
        return {
            title: "Custom"
        };
    }    
});

wt-shopfinder-detail-base/wt-shopfinder-detail-base.html.twig

<sw-card title="Custom">
    Hello world!
</sw-card>

Blockquote

Anyone can help here what’s wrong I’m doing?

Thanks.

2

Did you ever find a solution to this?