Module not loading in the administration and also not showingin the menu in shopware

Question

** The Module Code**

import enGB from "./snippets/en-GB.json";
import deDE from "./snippets/de-DE.json";
import "./page/ingredients-list";

Shopware.Module.register('ingredients', {
    type: 'plugin',
    name: 'Example',
    title: 'ingredients.general.mainMenuItemGeneral',
    description: 'ingredients.general.descriptionTextModule',
    color: '#ff3d58',
    icon: 'regular-whatsapp',
    snippets: {
        'en-GB': enGB,
        'de-DE': deDE
    },
    routes: {
        list: {
            component: 'ingredient-list-page',
            path: 'ingredients'
        }
    },
    navigation: [{
        id: 'swag-custommodule-list',
        label: 'ingredients.listIngredients',
        color: '#ff3d58',
        path: 'ingredients.list',
        icon: 'regular-whatsapp',
        parent: 'sw-catalogue',
        position: 100
    }],
    settingsItem: [{
        group: 'plugin',
        to: 'swag.plugin.list',
        icon: 'default-object-rocket',
        name: 'swag-example.general.mainMenuItemGeneral'
    }],
    created() {
        console.log("Moduleeeeeeeeeeeeeee Created");
    }
})

This is The Folder Structure

I did an Administration build and i cleared the cache too but still nothing is showing up in the administration

I am expecting this module to be created and to ne shown as a menu entry in the administration under the catalogue section

Answer 1

The technical name of your module has to be in the format {{vendor}}-{{name}}. This is to prevent multiple developers choosing identical names for their modules. For the vendor choose a rather short prefix that should uniquely represent you.

Registering the module should then work like this:

Shopware.Module.register('foo-ingredients', {
    // ...
    routes: {
        list: {
            component: 'foo-ingredient-list-page',
            path: 'ingredients',
        },
    },
    navigation: [{
        label: 'ingredients.listIngredients',
        color: '#ff3d58',
        path: 'foo.ingredients.list', // in paths separate vendor prefix by dot
        icon: 'regular-whatsapp',
        parent: 'sw-catalogue',
        position: 100,
    }],
})

Note that you should also prepend all the names of your components with your vendor prefix.