JS SyntaxError bei Plugin-Registrierung

Shopware 6 (German) Programmierung
1

Für ein Test wollte ich ein Plugin in meiner main.js registrieren. Für den Import also folgende Zeile eingetragen:

import QuantityFieldPlugin from './script/quantity-field.plugin'

Der Browser allerdings sagt:

SyntaxError: import declarations may only appear at top level of a module

Der Ordner stimmt, die Datei stimmt auch. Ich sehe das Problem nicht.

2

Ich muss noch mal auf das Thema eingehen und eventuell liegt der Fehler wo anders. Nun, bei dem Test handelt sich sich um ein eigenes Theme, welche per Console erstellt wurde. Also Struktur und die „main.js“ wurden automatisch von Shopware angelegt.

NamePlugin/src/Resources/app/storefront/src/main.js

Ich habe zudem gelesen, dass die „main.js“ wohl automatisch eingelesen wird. In meinem Falle ist das leider nicht so. Weiß nicht warum, aber aus meiner Sicht ist der Path alles korrekt. Ich habe daraufhin die „main.js“ in meine „theme.json“ eingetragen, erst dann wurde sie eingelesen. Verstehe ich nicht.

  "script": [
    "@Storefront",
    "app/storefront/src/main.js"
  ],

Wie dem auch sei, die „main.js“ wird erfasst wirft mir aber SyntaxError aus. Das Beispiel ist übrigens aus der Shopware 6 - Template Training Advanced Online Schulung.

3

Hat keiner eine Idee zur oben erwähnten Fehlermeldung?

4

Die Fehlermeldung ist doch recht eindeutig, oder nicht? Das import wird anscheinend nicht am Beginn der Datei durchgeführt sondern erst nachdem andere Ausdrücke geschrieben wurden. Das ist auf jeden Fall das, was die Fehlermeldung aussagt.

5

Hm, dachte ich, aber über der Import-Zeile steht nur ein Kommentarfeld. Das kann es ja nicht sein oder?

6

Die komplette Datei sieht so aus. Also ich sehe keinen Fehler!


/*
Shopware 6 - Template Training Advanced -> JavaScript plugin quantity field
*/

import QuantityFieldPlugin from './script/quantity-field.plugin'

window.PluginManager.register('QuantityFieldPlugin', QuantityFieldPlugin, '[data-quantity-field]' );

Dennoch bekomme ich die oben erwähnte Fehlermeldung :frowning:

7

Am ende des Imports fehlt das Semikolon.

Könntest du dann noch den Inhalt/Anfang des quantity-field.plugin.js und die Ordnerstruktur anzeigen?

8

Das sollte eigentlich hier keine Rolle spielen.

Ansonsten:

MeinPlugin
├ composer.json
└ src
  └ Resources
    └ app
      └ storefront
        ├ dist
        └ src
          ├ assets
          └ script
            └ quantity-field.plugin.js
          └ scss
            └ base.css
          └ main.js
    └ views
      ... 
    └ theme.json
  └ MeinPlugin.php

main.js:

MeinPlugin/src/Resources/app/storefront/src/main.js

quantity-field.plugin.js

MeinPlugin/src/Resources/app/storefront/src/script/quantity-field.plugin.js

import Plugin from 'src/plugin-system/plugin.class';
import DomAccess from 'src/helper/dom-access.helper';

export default class QuantityFieldPlugin extends Plugin {

  init() {

    console.info('QuantityFieldPlugin')

    this.minus = DomAccess.querySelector(this.el, '.decrease')
    this.plus = DomAccess.querySelector(this.el, '.increase')
    this.field = DomAccess.querySelector(this.el, 'input[type="number"]')
    
    this.registerEvents()
  }


  registerEvents() {

    this.minus.addEventsListener('click', this.decreaseQuantity.bind(this))
    this.plus.addEventsListener('click', this.increaseQuantity.bind(this))

  }


  decreaseQuantity() {
    console.info('-----')
  }
  increaseQuantity() {
    console.info('+++++')
  }

}
9

Noch eine Anmerkung:

Im fertigen Quellcode steht vor meiner Import-Zeile noch dies:

For license information please see vendor-node.js.LICENSE.txt
[hier zusätzlicher JS-Code]

Das kommt aber von Shopware selber.