JavaScript No Longer Loading Properly

Question

Been running an M2 store for some time now, but for some reason JavaScript is suddenly not loading properly on the frontend.

Unsure how this happened, but it's obviously now preventing any orders from being placed, as the add to cart button is disabled as a result (though add to cart does work from quickview).

Site is running Magento ver. 2.3.5-p1.

Changing the theme to Luma didn't help -- JS continues not to load.

No changes were made beyond a couple of lines of CSS (now removed) and some general admin things (product updates, etc.).

Tried disabling a few things after we became aware of this problem, such as a live chat integration as well as turning off JS minify/bundling.

Also ran through a few commands:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/magento cache:flush
php bin/magento cache:clean

Tried manually deleting the contents of:

• pub/static (.htaccess not deleted and is still present)
• generated/metadata
• generated/code

Also reran the following command to check permission:

find var generated vendor pub/static pub/media app/etc -type f -exec chmod u+w {} + && find var generated vendor pub/static pub/media app/etc -type d -exec chmod u+w {} + && chmod u+x bin/magento

A file backup of the site (not DB) that was taken last week (when the JS was working) was restored, to no effect -- the JS issue persists, despite it not being a problem when the backup was taken.

Sadly, none of this has helped.

I suspect the issue is related to an error shown in the console:

Uncaught SyntaxError: JSON.parse: end of data while reading object contents at line 1 column 2 of the JSON data

The file this relates to is /pub/static/frontend/Vendor/Theme/lang/mage/apply/main.js and the errors are specifically lines 58 (getData) and 74 (apply).

Any insight as to what can be done to correct this would be greatly appreciated, thanks.

Answer 1

You are getting the error because a a magento javascript initialiser has a corrupted JSON.

This can happen if you are using <script type="text/x-magento-init"> or data-mage-init=. Frequently these can break if you are adding them in a wysiwyg editor.

I looked at your question earlier and saw a link to the page with the error so I've gone back and found it. Your issue is in your newsletter's form element.

<form id="newsletter-validate-detail" class="form subscribe hp-newsletter-v1" action="<action URL removed>" method="post" novalidate="novalidate" data-mage-init="{">

You see the data-mage-init="{" part? that expects a JSON and mage/apply/main.js is what parses and processes these javascript calls.

One way to debug them, the way I used this time was to view the source of the page in chrome (because chrome reloads the page to show the source unlike firefox) then you can check the magento javascript types for the broken JSONs.

Answer 2

you can regenerate your static content by running the following command

php bin/magento setup:static-content:deploy

This is the command you'd run before deploying to production mode. If you're running in default or developer mode, those files should be generating for your automatically. My guess is you may have removed a folder Magento expects to be there -- running setup:static-content:deploy may restore that folder, or may result in an explicit error about the missing folders. If it's the later, the error should (hopefully!) provide enough information to rebuild the missing directories.

php bin/magento -vvv setup:static-content:deploy

This will tell the bin/magento command to output the actual exception if there's an error.

Answer 3

Disable native Magento_Csp module.

php bin/magento module:disable -f Magento_Csp

then do setup:upgrade, setup:di:compile and setup:static-content:deploy -f like you would normally do when installing and removing stuff.