Compiled storefront JS not executed by default installation

[moorl]

Reference:
https://forum.shopware.com/discussion/62432/javascript-einbinden-custom-events#latest

My compiled storefront script is merged to the all.js but nothing happens then. It just works when i run storefront:build. But i can't run it on my Demo shop (EA2).

[moorl]

StorefrontScriptTest.zip

[moorl]

Hey there @tobiasberge

Did you check this issue?

[tobiasberge]

Hi wa-pgeorg,

thank you for your feedback.

I think the reason why your built JavaScript is not running is the webpack build process itself. Unfortunately we had to make some changes to our webpack configuration in the EA1.1 version.

By default webpack optimizes the JavaScript code for performance and it also adds scopes to prevent naming conflicts. This can however cause problems with plugin code because every time when the build process (administration:build) is executed the built code can have different ids/function names.

We have changed some optimization settings to prevent this from happening. But this also means that all compiled code which has been built before the EA1.1 version might not run properly. "You can only see the code but nothing happens."

This is what your build code looks like right now (storefront-script-test.js):

(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{11:function(e,t,n)

And this is how it looks after EA1.1:

(window.webpackJsonp=window.webpackJsonp||[]).push([["storefront-script-test"],{E7jd:function(t,e,n)

As you can see the "4" in the array is now a concrete name "storefront-script-test" and the function is no longer named "11".

This is why it only works after you run storefront:build.

The plugin which you have used from the docs has also outdated JS code. We will update this asap.

TL;DR:

• When your JS was built before EA1.1 you have to run storefront:build one time to be compatible.
• Due to to the webpack config changes this should not be necessary in the future.

I want to apologize for the effort but I hope that I could help you with that explanation.

Best regards
Tobias

[moorl]

hey @tobiasberge
thank you very much, i will give you feedback soon ;)

[moorl]

I tested it with my example and this works fine so far. But my more complex storefront script still have issues.

I get an JS error:
Uncaught TypeError: Cannot read property 'call' of undefined at i (all.js:109) at Object.<anonymous> (all.js:113) at Object.9IDA (all.js:113) at i (all.js:109) at Module.SgsM (all.js:113) at i (all.js:109) at n (all.js:109) at Array.r [as push] (all.js:109) at all.js:113

I checked the "pretty print" of the compiled JS and marked all the missing functions (the names "A51+" and all others aren't twice times in the compiled JS).

tyvm so far, keep on ;)

[moorl]

@tobiasberge

This error is caused by external node.js JavaScript Libraries. In my case i switched from many imports to exactly one. I checked the behaviour and noted that just one type of this "n()" functions is missing.

Ref:
#136

[moorl]

importing my node.js library relative is fixing this issue, but i think this isn't a longterm solution :P

[dithom]

Still having this issue at 6.3.3.1. It works in my dev env but when I upload the build to a prod env and install and activate the plugin this error keeps coming up and stops all js from being executed. When I rebuild the storefront in prod directly through the shell script in bin/build-storefront.sh the error disappears. This also is what I'm telling my customers to fix this issue right now, when its happening on their Shopware instance. However can this be fixed please? Thanks!

[nilsE]

I also have this problem (SW 6.4.4.1) - any help on this?

[htuscher]

I found the general cause of this issue:

If you compile your plugin JS locally using the Shopware Storefront webpack configuration, it detects that you have a folder called node_modules inside your plugin:

                ...(() => {
                    if (isProdMode) {
                        return {
                            vendor: {
                                test: path.resolve(__dirname, 'node_modules'),
                                name: 'vendors',
                                chunks: 'all',
                            }
                        }
                    }

It doesn't matter if you use either ../../node_modules or if you add it as a resolve alias in your own plugins storefront/build/webpack.config.js like it's described in the documentation.
The webpack config of the storefront will match node_modules and extract all those modules into the vendors.js, vendor-node.js and the vendor-shared.js in the dist folder of the Storefront itself.

Which means your plugin only works with this modified JS of the Storefront, which is practically impossible as you can't force any other user to overwrite the files vendor/shopware/storefront/Resources/app/storefront/dist/js/vendors.js (and the others) when your plugin is being installed.

[bearenstarq]

Anything new on this issue??

[PatrickKalka-SeriousByte]

Hey @tobiasberge

Could you tell if there is investigation going on?
Thank you.