# JS SyntaxError bei Plugin-Registrierung

**URL:** <https://forum.shopware.com/t/js-syntaxerror-bei-plugin-registrierung/97696>\
**Category:** Programmierung\
**Created:** [20. Dezember 2022 um 14:49 UTC](https://forum.shopware.com/t/js-syntaxerror-bei-plugin-registrierung/97696 "2022-12-20T14:49:57Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [20. Dezember 2022 um 14:49 UTC](https://forum.shopware.com/t/js-syntaxerror-bei-plugin-registrierung/97696/1 "2022-12-20T14:49:57Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [21. Dezember 2022 um 08:13 UTC](https://forum.shopware.com/t/js-syntaxerror-bei-plugin-registrierung/97696/2 "2022-12-21T08:13:17Z")

</div>

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.

```auto
  "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.

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [4. Januar 2023 um 14:44 UTC](https://forum.shopware.com/t/js-syntaxerror-bei-plugin-registrierung/97696/3 "2023-01-04T14:44:04Z")

</div>

Hat keiner eine Idee zur oben erwähnten Fehlermeldung?

---

<div class="post-metadata">

**Author:** ![Max\_Shop](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Max\_Shop](https://forum.shopware.com/u/Max_Shop)\
**Post date:** [4. Januar 2023 um 15:06 UTC](https://forum.shopware.com/t/js-syntaxerror-bei-plugin-registrierung/97696/4 "2023-01-04T15:06:02Z")

</div>

> [@R4M](#):
>
> may only appear at top level of a module

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.

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [4. Januar 2023 um 15:37 UTC](https://forum.shopware.com/t/js-syntaxerror-bei-plugin-registrierung/97696/5 "2023-01-04T15:37:20Z")

</div>

> [@Max\_Shop](#):
>
> ist doch recht eindeutig, oder nicht?

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

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [5. Januar 2023 um 07:15 UTC](https://forum.shopware.com/t/js-syntaxerror-bei-plugin-registrierung/97696/6 "2023-01-05T07:15:41Z")

</div>

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

```auto

/*
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 ☹

---

<div class="post-metadata">

**Author:** ![abdullah](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@abdullah](https://forum.shopware.com/u/abdullah)\
**Post date:** [5. Januar 2023 um 10:00 UTC](https://forum.shopware.com/t/js-syntaxerror-bei-plugin-registrierung/97696/7 "2023-01-05T10:00:42Z")

</div>

Am ende des Imports fehlt das Semikolon.

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

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [5. Januar 2023 um 10:20 UTC](https://forum.shopware.com/t/js-syntaxerror-bei-plugin-registrierung/97696/8 "2023-01-05T10:20:48Z")

</div>

> [@abdullah](#):
>
> Am ende des Imports fehlt das Semikolon.

Das sollte eigentlich hier keine Rolle spielen.

Ansonsten:

```auto
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

```auto
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('+++++')
  }

}

```

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [5. Januar 2023 um 10:28 UTC](https://forum.shopware.com/t/js-syntaxerror-bei-plugin-registrierung/97696/9 "2023-01-05T10:28:09Z")

</div>

Noch eine Anmerkung:

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

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

```

Das kommt aber von Shopware selber.

---

<div class="post-metadata">

**Author:** ![TomJung](https://avatars.discourse-cdn.com/v4/letter/t/3ec8ea/32.png) [@TomJung](https://forum.shopware.com/u/TomJung)\
**Post date:** [23. Mai 2024 um 16:22 UTC](https://forum.shopware.com/t/js-syntaxerror-bei-plugin-registrierung/97696/10 "2024-05-23T16:22:39Z")

</div>

Moin! Gab es zu dem Problem eine Lösung? VG

---

<div class="post-metadata">

**Author:** ![mtness](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/mtness/32/22909_2.png) [@mtness](https://forum.shopware.com/u/mtness)\
**Post date:** [21. Mai 2025 um 16:29 UTC](https://forum.shopware.com/t/js-syntaxerror-bei-plugin-registrierung/97696/11 "2025-05-21T16:29:14Z")

</div>

Wieder ein Jahr später, immer noch niemand eine Lösung dafür ?