Each dictionary in the list "icons" should contain a non-empty UTF8 string field "type"

Asked 12/2, 2021 at 11:32 Answered 21/8, 2023 at 22:25

While analyzing the html of the product on my Shopify website for errors, I found this peculiar error repeated 6 times: "Each dictionary in the list "icons" should contain a non-empty UTF8 string field "type"."

Link of the page: https://www.fermento24.com/collections/vini-in-offerta-questo-mese/products/terra-di-lavoro-igp-2017-galard?variant=32793469780039

I tried to figure out where this problem comes from, but Google isn't really clean in addressing where this is coming from, as it brings me to the first string of the site "<!doctype html>"

Anyone can help me figure out this problem?

Edit: screenshot here: i.imgur.com/y2gjnIr.png

to see the error, as stated by JosefZ: go to the site, Right click => Inspect (or Ctrl+Shift+I).

Danaedanaher answered 12/2, 2021 at 11:32 Comment(7)

While analyzing the html … Please share a minimal reproducible example. – Anechoic 12/2, 2021 at 12:43

Sorry if I answer only now: I do not know what is triggering the error, I found the error by using the console from google chrome and looking at the errors signed in there. Aside from showing the link, I have no idea how to show you a minimal reproducible example. – Danaedanaher 19/2, 2021 at 10:9

I took a look at your example page and did not see the above error listed in the console. Can you confirm that the error is still showing up for you, and if so can you also please confirm which tool(s) you are using to see it? (And if possible, perhaps provide a screenshot of the error with any surrounding context?) – Unaccountedfor 25/2, 2021 at 19:1

@DaveB go to the site, Right click => Inspect (or Ctrl+Shift+I). I can confirm those six error lines in the Console tab. – Anechoic 26/2, 2021 at 18:45

The warnings seem to only appear in Chrome. – Rodge 27/2, 2021 at 11:0

screenshot: i.imgur.com/y2gjnIr.png . – Danaedanaher 1/3, 2021 at 8:28

I added some breakpoints to the JS and the messages are printed right after chrome prompts the user to select the language, what implementation are you using for i18n? – Tractarianism 1/3, 2021 at 19:47

Seems like you need to pass an additional key in your i18n object, i tracked down the issue to this function (i have no access to the source code so here is the formatted source file in your site)

And your dictionary object looks like this:

So you need to add a key to the objects inside actions called "type" of the type "string"

icons: {
  submenu: "ui-icon-caret-1-e",
  type: "icon"
}

Tractarianism answered 1/3, 2021 at 19:59 Comment(6)

Thank you for your answer, but I'm a bit taken aback by this. In what file did you find this? And where should I add the "icons" code? I've tried opening the console to see what you pointed out, but I can't seem to see it. Website is done with shopify so I have to reverse engineer to what the source is. – Danaedanaher 2/3, 2021 at 14:17

Im don't know where this is stored in your source files, what I did was look for the word "icons" using chrome devtools and added breakpoints in all of the matches in the JS files, this way I finally figured where the error was. Unless you can share a link to a repo/sourcecode there isn't much else I can think off also, what you are seing in there should be in about the same line in your expanded {} version of the file in the browser sources – Tractarianism 2/3, 2021 at 21:43

I get what you did, but to what did you specifically add the breakpoint? I'm asking because Shopify creates the product page based on template, a js linked to it and other stuff. I want to share a source code, but I'd like to be sure what source code I should share with you. – Danaedanaher 3/3, 2021 at 9:10

you could look for all JS files in that codebase that have ":not(.ui-menu)", also you could check the dictionary's structure... from what I see that is likely the only way to prevent this issue. The other way would be intercepting or adding a generic key in that function – Tractarianism 3/3, 2021 at 19:4

AHA! Think I figured it out! .ui-menu refers to the popup menu that appears suggesting products when you write. If that is the cause of the problem, then it's the third party app creating problems! I'll send a mail to the developer and see if its that, I'll keep you posted. – Danaedanaher 4/3, 2021 at 9:17

Im glad you figure it out, it did seems like something 3rd party related, I'd recommend you take a look at this devtools tutorials by google: developers.google.com/web/tools/chrome-devtools/javascript they explain in detail how to use devtools to find this sort of issues – Tractarianism 4/3, 2021 at 14:22

The cause of those warnings seems to be Shopify Dynamic Checkout Buttons. Removing the following code from the page template should get you rid of those warnings, but also will remove Dynamic Checkout Buttons.

{{ form | payment_button }}

Since this seems to be generated on Shopify's side, I assume contacting Shopify support team asking them to resolve the issue would be the way to resolve those warnings while keeping Dynamic Checkout Buttons functionality.

Interlocutress answered 21/8, 2023 at 22:25 Comment(0)

Recommended topics

Hot tags