Console errors: Uncaught Error: Script error for... (unable to load files)

[beendeluxe]

Hey,

we are facing an issue with this extension. We installed it via composer and set it up.

For some reason the console have some errors with .js files.

For example;
Uncaught Error: Script error for: yireoGoogleTagManagerProductClicks http://requirejs.org/docs/errors.html#scripterror

We noticed that the ressource cannot be loaded because it has a wrong path.
The module try to load these files from
/frontend/theme/theme_child/en_US/yireoGoogleTagManagerProductClicks.min.js

But in our case the files are located in
/frontend/theme/theme_child/en_US/Yireo_GoogleTagManager/ProductClicks.min.js

Is this a known bug? How we could fix it so the files will be deployed to the correct path? the above file "ProductClicks.min.js" is a sample, there are some more files that do not load correctly.

Hope to get this solved.

Thanks.

[jissereitsma]

I think there might be something fundamental wrong with your static deployment. First of all, a file like this one https://github.com/yireo/Yireo_GoogleTagManager2/blob/master/view/frontend/web/js/product/clicks.js should be deployed to a file Yireo_GoogleTagManager2/js/product/clicks.js in your theming folder. Furthermore, there is a RequireJS configuration that creates a mapping from an alias yireoGoogleTagManagerProductClicks to this file in your theming folder.

The suffix .min.js suggests that you are using JavaScript minification. From that, I assume that you are using the Production Mode. However, with minification, all the original files (like Yireo_GoogleTagManager2/js/product/clicks.js) will be minified in the same location (like Yireo_GoogleTagManager2/js/product/clicks.min.js).

In your user story, there are some things missing: Magento version? Is this in the Developer Mode or in the Production Mode? If Production Mode, what happens in Developer Mode? Which mechanism did you use to generate minified files? What commands did you execute after the composer require command (because there should be a hell of lot more commands)?

[beendeluxe]

Thank you for your fast reply.

You are right, the files will deploy correctly at Yireo_GoogleTagManager2/js/product/clicks.min.js for example.

More Details here;
We use Magento 2.4.6-p3
production mode
config sets;
php bin/magento config:set dev/js/enable_js_bundling 0
php bin/magento config:set dev/js/merge_files 1
php bin/magento config:set dev/js/minify_files 1
php bin/magento config:set dev/css/merge_css_files 1
php bin/magento config:set dev/css/minify_files 1

Commands we always execute, when changing something;
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento indexer:reindex
bin/magento cache:clean

I think that for some reason the mappings taking no effect. The module still looking for the path:
/frontend/theme/theme_child/en_US/yireoGoogleTagManagerProductClicks.min.js

As per your comment it should map it into this:
/frontend/theme/theme_child/en_US/Yireo_GoogleTagManager/Product/Clicks.min.js

Could it have something to do with minify or merging files config? Or maybe it has to do something with our custom Theme? We already tried it on Luma Thema, same issue here.

[jissereitsma]

Did you check the active requirejs.config.js in the browser to double-check that this extension plus its alias for yireoGoogleTagManagerProductClicks is existing? Because if it is not existing, indeed RequireJS make a non-sense call.

[beendeluxe]

I have now checked the requirejs.config.js in browser console. This snippet is inside;
require.config(config);})();(function(){var config={map:{'*':{'yireoGoogleTagManager':'Yireo_GoogleTagManager2/js/generic','yireoGoogleTagManagerPush':'Yireo_GoogleTagManager2/js/push','yireoGoogleTagManagerProductClicks':'Yireo_GoogleTagManager2/js/product/clicks','yireoGoogleTagManagerLogger':'Yireo_GoogleTagManager2/js/logger'}}

[jissereitsma]

What do you think? It looks like broken to me ... :(

[jissereitsma]

This is the code without syntax errors:

(function(){var config={map:{'*':{'yireoGoogleTagManager':'Yireo_GoogleTagManager2/js/generic','yireoGoogleTagManagerPush':'Yireo_GoogleTagManager2/js/push','yireoGoogleTagManagerProductClicks':'Yireo_GoogleTagManager2/js/product/clicks','yireoGoogleTagManagerLogger':'Yireo_GoogleTagManager2/js/logger'}}}});

And with that, there is a correct mapping yireoGoogleTagManagerProductClicks for the script Yireo_GoogleTagManager2/js/product/clicks.

I'm out of ideas, unless I'm able to reproduce this.

[beendeluxe]

It was a third-party optimization tool which did the errors. We could fix it within this module.

Thanks for your hints.