Wie kann man in der Backend-Navigation einen Untermenüpunkt erstellen?

Shopware 6 (German)
1

Hallo,

für ein Plugin benötige ich im Backend eine Seite zur Eingabe von Daten.
Dazu möchte ich im Menüpunkt „Marketing“ einen Untermenüpunkt zur Seite erstellen.

Im Pfad „custom/plugins/Linkuicer/src/Resources/app/administration/src“ liegt die main.js mit folgendem Code:

import './module/linkjuicer-module';

Im Pfad „custom/plugins/Linkuicer/src/Resources/app/administration/src/module/linkjuicer-module“ liegt die index.js mit folgendem Code:

import './page/linkjuicer-overview';
import './component/linkjuicer-detail';
import './component/linkjuicer-list';

Shopware.Module.register('linkjuicer-module', {
    type: 'plugin',
    name: 'Linkjuicer',
    title: 'Linkjuicer',
    description: 'Verwalten Sie Ihre Linkjuicer-Regeln',
    color: '#ff3d58',
    icon: 'default-object-lab-flask',

    routes: {
        overview: {
            component: 'linkjuicer-overview',
            path: 'overview',
            meta: {
                label: 'Linkjuicer Übersicht'
            }
        }
    },

    navigation: [{
        id: 'linkjuicer-module-overview',
        label: 'Linkjuicer',
        color: '#ff3d58',
        path: 'linkjuicer.module.overview',
        parent: 'sw-marketing',
        position: 100
    }],
});

In der Konsole habe ich folgende Befehle ausgeführt:

bin/console plugin:uninstall Juicer
bin/console plugin:install --activate Juicer
./bin/build-administration.sh
bin/console cache:clear

Leider wird der Menüpunkt nicht angezeigt.
Ist der Code falsch, oder fehlt noch irgend eine Maßnahme?

Danke

2

Beim Auführen von …

./bin/build-administration.sh

… wird in der Konsole folgende Fehlermeldung ausgegeben:

ERROR in /var/www/vhosts/meineDomain/httpdocs/custom/plugins/Linkjuicer/src/Resources/app/administration/src/module/linkjuicer-module/page/linkjuicer-overview.vue
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    SyntaxError: /var/www/vhosts/meineDomain/httpdocs/custom/plugins/Linkjuicer/src/Resources/app/administration/src/module/linkjuicer-module/page/linkjuicer-overview.vue: Support for the experimental syntax 'jsx' isn't currently enabled (1:1):

Die inkjuicer-overview.vue enthält folgenden Code:

<template>
    <div class="linkjuicer-overview">
        <h1>Linkjuicer Übersicht</h1>
        <!-- UI-Elemente hier -->
    </div>
</template>

<script>
export default {
    name: 'linkjuicer-overview',
    // Weitere Optionen und Methoden hier
};
</script>

<style scoped>
/* Stildefinitionen für die Übersichtsseite */
.linkjuicer-overview {
    /* Stileigenschaften */
}
</style>

Was ist mit „Support for the experimental syntax ‚jsx‘ isn’t currently enabled (1:1):“ gemeint?

3

Zu dieser Fehlermeldung habe ich zwischenzeitlich auch Google bemüht.
In mehreren Beiträgen auf stackoverflow wurde als Lösung vorgeschlagen eine package.json zu erstellen und die Datei im Hauptverzeichnis des Projektes anzulegen.

In meinem Plugin ist das in /custom/plugins/Linkjuicer/src/Resources/app/administration/src/package.json

Die Datei enthält folgende Codezeilen:

"babel": {
    "presets": [
        "@babel/preset-env",
    ]
}

Die o.g. Fehlermeldung ist damit zwar Geschichte, aber ich erhalte eine leider auch eine neue:

EntryModuleNotFoundError: Entry module not found: SyntaxError: /var/www/vhosts/meineDomain.de/httpdocs/custom/plugins/Linkjuicer/src/Resources/app/administration/src/package.json (directory description file): SyntaxError: Unexpected non-whitespace character after JSON at position 7

Über Hilfe würde ich mich deshalb noch immer sehr freuen. :wink:

Danke

4

„Mühsam ernährt sich das Eichhörnchen!“

Bisher habe ich in den drei vue Dateien nur ein Code-Grundgerüst, aber darain sind offensichtlich bereits Sytax-Fehler enthalten, denn wenn ich in der index.js deren Import entferne, verschwinden die Fehlermeldungen und ich sehe auch endlich einen Untermenüpunkt im Backend.

Wie ich die Dateien aufgerufen habe dürfte ja nicht falsch gewesen sein:

import './page/linkjuicer-overview';
import './component/linkjuicer-detail';
import './component/linkjuicer-list';

Dann werde ich jetzt mal prüfen, was am Syntax nicht stimmt.