Uncaught SyntaxError: Unexpected token , in JSON

[heyepic]

Preconditions

1. Upgrade from 2.2.3 > 2.2.4
2. PHP 7

Steps to reproduce

1. Go to any product page that has an image.
2. You will see a spinning gif but the image never loads.
3. Console error: Uncaught SyntaxError: Unexpected token , in JSON

Expected result

1. Image gallery loads.

Actual result

1. Just see the spinning gif. This worked fine prior to upgrade.

This is the error: Uncaught SyntaxError: Unexpected token , in JSON at position 1025, from a JSON array. Attached an image. Here is the full data array "data": [{"thumb":"https:\/\/v3.asdf.com\/pub\/media\/catalog\/product\/cache\/460a3bcbdb4cc235aac43a6f81f8f135\/s\/j\/sjm2016.jpg","img":"https:\/\/v3.asdf.com\/pub\/media\/catalog\/product\/cache\/c687aa7517cf01e65c009f6943c2b1e9\/s\/j\/sjm2016.jpg","full":"https:\/\/v3.asdf.com\/pub\/media\/catalog\/product\/cache\/926507dc7f93631a094422215b778fe0\/s\/j\/sjm2016.jpg","caption":"SJM 2016 Camaro Line Lock","position":"1","isMain":true,"type":"image","videoUrl":null}],

[xtremeperf]

You need to flush all the caches and delete all generated data. Recompile the code too, with your caches disabled and file access to the entire magento root directory offline (this includes the web server, caching systems such as Varnish, and running cron schedules). If you have any systems running automated health checks/pings through /magento/pub/health_check.php, that will cause problems because a fresh instance of the php app is created every time it's called... so while you are clearing out the cached data, it's being re-created on the fly at the same time (yes, even in production mode classes are being created in /magento/generated)

Any time you get these "Uncaught SyntaxError: Unexpected token" type of errors in your JS right after an upgrade (there will usually be many, many JS errors) you need to clear out the caches.

Also, if you are using the default backend caching to the filesystem, make sure the file and directory permissions are correct. There is a bug that causes incorrect permissions in var/cache and var/page_cache. It is already fixed in dev branches and should be included in the next release.

I hope that helps... good luck!

[heyepic]

I will try that - I kept wiping cache, set perms and the like but maybe I missed something. The thumbnails show up for all products but when you get into the product page, then it just spins the gif. Thanks!

[sidchs]

Same for me, had to revert back to previous version 2.2.3 ! Still no idea how to resolve !

[heyepic]

Unfortunately those suggestions did not work. Thumbnails still work everywhere but actual product images refuse to load. I know they exist on the server and 2.2.3 had zero issues with this. I'm glad @sidchs chimed in so I know it's not just my installation.

[heyepic]

OK - I found out that it's my theme. I added an underscore to the filename of app/design/frontend/mytheme/Magento_Catalog/templates/product/viewgallery.phtml in hopes that it would skip using my theme's version. I refreshed and the images now show. I guess I have to compare the native gallery.phtml to my theme's gallery.phtml and find out what changed.

[sidchs]

You are having exact same issues as me ! Thumbnails etc fine, product images just spinning disk ! Happening to me on 2 installs !

[heyepic]

@sidchs Did you try doing what I posted right above?

[sidchs]

Hi, I hopefully will try overnight UK time, otherwise it will affect live sites ! Will keep you informed , appreciate your help thanks From: Matt Sent: Friday 4 May, 17:12 Subject: Re: [magento/magento2] Uncaught SyntaxError: Unexpected token , in JSON (#14977) To: magento/magento2 Cc: sidchs, Mention @sidchs Did you try doing what I posted right above? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[damien-lechopier]

Hi,

I have the same issue with theme "Moza".
The solution to remove the file app/design/frontend/mytheme/Magento_Catalog/templates/product/gallery.phtml
works for me too.

Thanks for the help.

[lee586]

Same issue here except that mine were random. Most product images would still load but others would show the spinning ball of death and throw, "Uncaught SyntaxError: Unexpected token N in JSON at position 84." I have done everything starting with flushing to removing all the generated files, re-compiling, and re-deploying. I've even restarted the server. Nothing works.

[heyepic]

If you're running a custom theme, I'd suggest trying the above or even removing a few a time (just add _ to filenames, of course keep cache off so you don't need to flush).

[sidchs]

Hello, I have tried this morning your suggestions – however before I got to the point I have incurred further problems when upgrading to 2.2.4 See below Please upgrade your database: Run "bin/magento setup:upgrade" from the Magento root directory. The following modules are outdated: Magento_Directory data: current version - 2.0.1, required version - 2.0.2 Magento_Customer data: current version - 2.0.12, required version - 2.0.13 Magento_Catalog data: current version - 2.2.3, required version - 2.2.4 Magento_Quote data: current version - 2.0.6, required version - 2.0.7 Magento_Sales data: current version - 2.0.7, required version - 2.0.9 Amazon_Core data: current version - none, required version - 2.0.4 Amazon_Login data: current version - none, required version - 1.2.0 Magento_Newsletter data: current version - 2.0.0, required version - 2.0.1 Amazon_Payment data: current version - none, required version - 1.11.0 Magento_Vault data: current version - 2.0.2, required version - 2.0.3 Klarna_Core schema: current version - none, required version - 4.1.5 Klarna_Core data: current version - none, required version - 4.1.5 Klarna_Ordermanagement schema: current version - none, required version - 4.1.2 Klarna_Ordermanagement data: current version - none, required version - 4.1.2 Klarna_Kp schema: current version - none, required version - 5.1.3 Klarna_Kp data: current version - none, required version - 5.1.3 Dotdigitalgroup_Email schema: current version - 2.3.8, required version - 2.4.9 Dotdigitalgroup_Email data: current version - 2.3.8, required version - 2.4.9 Temando_Shipping schema: current version - 0.3.1, required version - 1.1.0 Temando_Shipping data: current version - 0.3.1, required version - 1.1.0 Vertex_Tax schema: current version - none, required version - 100.1.0 Vertex_Tax data: current version - none, required version - 100.1.0 I have ‘Run "bin/magento setup:upgrade"’ as suggested , but this solved nothing. Any further help appreciated Thanks again From: damien-lechopier <notifications@github.com> Sent: 07 May 2018 09:30 To: magento/magento2 <magento2@noreply.github.com> Cc: sidchs <simon1@discountheating.com>; Mention <mention@noreply.github.com> Subject: Re: [magento/magento2] Uncaught SyntaxError: Unexpected token , in JSON (#14977) Hi, I have the same issue with theme "Moza". The solution to remove the file app/design/frontend/mytheme/Magento_Catalog/templates/product/gallery.phtml works for me too. Thanks for the help. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#14977 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/AlLgM_wdoNQwnEkEvZmOVDNPgMEcv_CQks5twAYjgaJpZM4Tx0Ph> . <https://github.com/notifications/beacon/AlLgMzy0f-QlCSXUZ9tuw9ReT0FXHUCKks5twAYjgaJpZM4Tx0Ph.gif>

[leekung]

problem is the JSON object is broken and cannot be parse. take a look at the line

                    "showCaption": ,

to fix this, in your custom theme file app/design/frontend/{Vendor}/{theme}/Magento_Catalog/templates/product/view/gallery.phtml
find the line

                    "allowfullscreen": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/allowfullscreen"); ?>,
                    "showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/caption"); ?>,
                    "width": <?php /* @escapeNotVerified */ echo $image_width; ?>,

change to

                    <?php if (($block->getVar("gallery/allowfullscreen"))): ?>
                        "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/caption"))): ?>
                        "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ?>,
                    <?php endif; ?>
                    "width": <?php /* @escapeNotVerified */ echo $image_width; ?>,

you may need to check other property and surround it with "if" condition
take a look at magento template file
vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml for reference