Fotorama Gallery JS Errors With Magepack JS Bundling Enabled

Question

We are using Magepack on a Magento v2.3.5-p2 website for JS bundling. See below:

https://github.com/magesuite/magepack

If we enable magepack JS bundling using the Luma or Blank theme it works fine without issue. However when we enable this using the clients implementation of porto theme it breaks the fotorama image gallery on the product pages. See error message that appears in the JS console below:

Uncaught TypeError: settings.$elementF.fotorama is not a function

When magepack JS bundling is disabled the image gallery works fine. It also works fine if the core Magento JS bundling is enabled. The issue is isolated to when magepack is enabled as far as we can tell.

Does anyone have any experience of this same issue when using Magepack JS bundling?
Does anyone know how to debug issues like this?
Is it something simple thing that we are missing like reordering the files in the magepack.config.js file?

Answer 1

I think you had same issue like mine. One of this helped:

1. Fancybox issue
2. remove dublicate jQuery loaded in head from one of the modules (Solwin)
3. After Magento update I didn't notice that default magento bandling was enabled.

After disabling and running commands again, everything start working again.

Disable magento bundle

php bin/magento config:set dev/js/enable_js_bundling 0

Generate magepack config

magepack generate --cms-url="https://yoururl.com" --category-url="https://yoururl.com/category" --product-url="https://yoururl.com/product"

Generate bundles

magepack bundle

Enable magepack bundle:

php bin/magento config:set dev/js/enable_magepack_js_bundling 1