JavaScript not working when minify is enabled

geertsmichael commented 4 years ago

Expected Behaviour

Expecting all JavaScript works when "Minify" is enabled on the "Html Library Manager" Osgi Config. And also all features in Touch UI and the site itself is working.

Actual Behaviour

The following JavaScript files fail to output JavaScript: http://localhost:4502/etc.clientlibs/core/cif/components/structure/navigation/v1/navigation/clientlibs.min.js http://localhost:4502/etc.clientlibs/core/cif/components/commerce/searchbar/v1/searchbar/clientlibs.min.js http://localhost:4502/etc.clientlibs/core/cif/clientlibs/common.min.js http://localhost:4502/etc.clientlibs/core/cif/components/commerce/product/v1/product/clientlib.min.js http://localhost:4502/etc.clientlibs/core/cif/clientlibs/react-components.min.js

Reproduce Scenario (including but not limited to)

Install:

Clean AEM 6.4.5 (no other code installed)
CIF archetype 0.6.2
CIF Connector 0.7.1
Configure osgi config to point to Magento instance, Bind products & configure this Magento catalog on the Venia site.

Some code is causing minification to fail. This has an impact on the following pages and actions:

http://localhost:4502/content/demo-magento/language-masters/en/products/product-page.proteus-fitness-jackshirt.html + try to switch colors (JavaScript not working)
http://localhost:4502/editor.html/content/demo-magento/language-masters/en/products/product-page.html + try to click "View with product" (JavaScript not working and dialog not opening)

Platform and Version

Clean AEM 6.4.5 (no other code installed) CIF archetype 0.6.2 CIF Connector 0.7.1

Logs taken while reproducing problem

When Minify is enabled, I see the following in the browser error console:

[Error] Refused to execute http://localhost:4502/libs/commerce/gui/components/common/cifpicker/clientlibs.min.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type. [Error] Refused to execute http://localhost:4502/libs/commerce/gui/components/common/cifproductfield/clientlibs.min.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type. [Error] Refused to execute http://localhost:4502/libs/commerce/gui/components/common/cifcategoryfield/clientlibs.min.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type. [Error] Refused to execute http://localhost:4502/libs/commerce/gui/components/authoring/editor/pagepreview/clientlibs.min.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type. [Error] Refused to execute http://localhost:4502/etc.clientlibs/core/cif/components/structure/navigation/v1/navigation/clientlibs.min.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type. [Error] Refused to execute http://localhost:4502/etc.clientlibs/core/cif/components/commerce/searchbar/v1/searchbar/clientlibs.min.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type. [Error] Refused to execute http://localhost:4502/etc.clientlibs/core/cif/clientlibs/common.min.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type. [Error] Refused to execute http://localhost:4502/etc.clientlibs/core/cif/components/commerce/product/v1/product/clientlib.min.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type. [Error] Refused to execute http://localhost:4502/etc.clientlibs/core/cif/clientlibs/react-components.min.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.

I also want to mention when minify is disabled, all features are working, but the browser error console still contains a few errors.

cjelger commented 4 years ago

I cannot exactly reproduce this issue, but we do have some problems with minification and if/where/how we will perform and configure the minification with our react components. Strictly speaking, this issue should have been opened in https://github.com/adobe/aem-core-cif-components but we can leave it here.

cjelger commented 4 years ago

This is now fixed by the linked PR in the components. Note that minification is now done by the webpack build of the components: code is minified by default when releasing the components, but not on SNAPSHOT versions.

The minification done by AEM for the clientlibs is always disabled for all the clientlibs built by webpack.

adobe / commerce-cif-connector