shopware: Compiled storefront JS with modules can't be executed in prod env
Description
I have a plugin, which imports some node modules (in plugin root) into its storefront plugin like so:
import Vimeo from '../../../../../../../node_modules/@vimeo/player/dist/player';
All is working fine in the dev env. But as soon as I install and activate the plugin in a prod env I get an error in the JS console:
“Uncaught TypeError: Cannot read property ‘call’ of undefined” in all.js
following lines are causing the error:
It sometimes even stops execution of other JS in the file. As soon as I recompile the storefront (and plugins) in the prod env using bin/build-storefront.sh the problem is gone. But this is not a valid fix for plugin customers.
Possible Solution Maybe there is an issue with the build script in dev envs?
Additional context
I found the following tickets regarding the same problem. Seems like it should have been fixed but I still got the problem.
and issue #152
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 18 (6 by maintainers)
Again we ran into this issue but this time it’s not even caused by dependencies. We are compiling a plugin in 6.4.18.1, which should be compatible down to 6.4.3.1. Compiled plugin is working fine in the dev env and prod env but is throwing an exception on a customers prod env running version 6.4.3.1. Bundle dump is not skipped, no third-party dependencies are used. There are no changes in the JS bundle when running
bin/build-storefront.shin dev or prod (obviously becausenpm buildis set to prod anyway). But the bundle built in 6.4.3.1 differs from the one built in 6.4.18.1. What should I tell our plugin customers? 🤡For the record: I managed to create a storefront build, which is working without any issues from
6.4.0.0to6.4.19.0using Shopware6.4.3.1. Running a storefront build in6.4.0.0results in a different bundle, same goes for6.4.17.0,6.4.18.0and6.4.19.0(these are the versions I tested). When trying to use the bundle from e.g.6.4.19.0in6.4.3.1I get theCannot read property 'call' of undefined" in all.jsexception.Does this mean we need to build all our plugins bundles in
6.4.3.1? What exactly is the issue, how can we fix it ourselves besides telling customers to create their own bundles or when will it finally be fixed? We can not simply release a new plugin version with updated bundles for every Shopware version. It’s a real pain for plugin developers.So again we ran into the same issue 🙄 we now were building another plugin, which uses momentJS as an npm dependency. We were following the docs on this topic and were using aliases but the issue still is not solved (https://developer.shopware.com/docs/guides/plugins/plugins/plugin-fundamentals/using-npm-dependencies).
In our dev env, which is the shopware dev template (https://github.com/shopware/development), we can build and run the storefront of our plugin without any problems in regular mode, as well as in hot-proxy mode. For our own sanity we also tested the whole process with the prod template using the build scripts (https://github.com/shopware/production), which also went well. But as soon as we deploy the prebuild plugin to a different env (wether dev or prod), the JS bundle of the plugin is causing the same issues:
Cannot read property 'call' of undefined" in all.jsThe only way to resolve this issue is to remove all imports of npm dependencies in our storefront scripts. We now had to rebuild the parts of momentJS we needed manually… At this time, there is still no way to successfully integrate npm dependecies in the storefront! This is huge! Please guys have a look into this. 😢
Thanks for the suggestions!
@dithom I will have a look on the aliases when I’m back on the project. @JoshuaBehrens While this approach is feasible for a project it is not working for a pre-built plugin which needs to be plug & play.