Shopware: Don’t reuse variables – webpack(!?)

Posted byFabian BlechschmidtPosted inTechStuffTags:, ,

Good morning! We submitted our payment plugin once again, Shopware’s review can be stressful, or in other words: They are doing an amazing job finding bugs.

What is going on?

  • Is my JS still loaded? Yes.
  • Is it executed? No
  • Why?!

I have no clue. Even worse – it seems like ALL frontend plugins are broken. How to know this? You can run

PluginManager.getPluginList()

in your browser console and I couldn’t see a single non-shopware plugin, what especially means Paypal is missing (yes you are right – it is technically a shopware plugin ?). Something weird is going on, but…

Storefront broke – I din’t touch anything!? ?

After a while inspecting with my colleague Carl we couldn’t find anything. The only code change between the old and the new version was this:

Screenshot of a diff of a minified JavaScript file, the only difference is the name of a method changed from 1848 to 5596 in two lines

Sorry for the pixelation, but it is not on me to leak the unreleased module.

The only difference is (right old, left new) a change of the variable name from 5596 to 1848. If I change the variable back it works again. Super strange and nothing I can understand.

Context is everything … and the small things

But while fiddling around with this piece of code, we spotted something important – maybe:

Screenshot of a search and replace of 1848 to 5596, 1 of 4 is marked with a red circle

Why is there four times 1848, my minified JS of my module only contains two ?

Shopware just merges files?

From my current point of view, it looks like Shopware is “just” merging all the JS files together, which ended up in my case with two global function named the same:

}, 1848: (t, e, n) => {
    var r = n(4999), i = n(2086);
    t.exports = /ipad|iphone|ipod/i.test(r) && void 0 !== i.Pebble

Because this piece of code over mine already took the name 1848 in global namespace.

How to fix?

In the short term: I ran the build again, got a new variable and it worked.

But long term, we need to think about how to check, wether we have duplicates in our builds – and I think, this should be a shopware core feature – which doesn’t mean at all, that they need to implement it. So whoever is well with JavaScript lexer, please check for this ?

Leave a Reply