I'm deploying a new version of my app and it was working perfectly fine during development, but for some reason after I deploy it to prod, when it loads, it's showing this (with the console message below):
I'm not sure why it's saying "failed to parse JSON" or which JSON it's referring to.
Any help would be greatly appreciated :)
The home page loads quickly and then it flips right away to this. This app is replacing a version that's about 2 years old by the way.
Solved! Go to the solution
Little more info on this...
The App I'm upgrading was created a few years ago so I'm now upgrading to use App Bridge. During development and testing, I had created a new test app where I did all my work and it works fine. Once I tried to deploy the app bridge code to the legacy production app, everything breaks.
What I'm wondering is, is there anything different between old apps using EASDK (before App Bridge came into being) and new apps created recently? It seems odd that deploying the same code to an old app breaks but deploying it to a new test app works. I feel like this is a compatibility issue between old stuff an new stuff.
Also, if I either disable app bridge, or don't create a title bar, everything works, EXCEPT, I see this message in the console when I deploy the new code to the legacy app:
Shopify.AppMessenger failed to parse JSON [object Object] from origin https://collectionmanager.innovanet.solutions
I don't know what it's trying to parse that's failing since I've removed almost everything. This is why I'm thinking it's a compatibility thing.
One more update...If you look at the screenshot here:
My production app currently looks like the screen on the left. I think I need to be switched over so that it looks like the screen on the right. It's almost like there's a config setting for my app within Shopify somewhere that's keeping it on the old EASDK or something.
Does that make sense?
I was trying to do a prod deployment this weekend and this is currently blocking me so any Shopify help would be greatly appreciated :)
Here is a screenshot of the nav bar from my current published prod app, and the staging version about to be deployed (below it):
The green arrows is the published app in prod today. If you look closely, you can see they're a little different. It's like the current published app isn't using App Bridge or something. I believe this difference is what's causing the first issue at the top.
Shopify, is there something you can do you enable this on my published app so I can deploy the new App Bridge version? I really need to deploy this today or I'll lose my deployment window :)
And one more...
This is what the buttons look like in the TitleBar of my published app:
Notice how the buttons are up on the right side? They should be on the left per the new App Bridge UI. For some reason my app is still showing the old way. Also, the company name should be at the top right, not the buttons.
When I created a new staging app to work on my latest updates, the TiteBar looks proper like this:
...with the buttons at the left and the company name at the top right.
I have no way to get my app in prod (the first screen) to use the new App Bridge UI. The code is creating the App Bridge app properly (as shown in the second shot), but for some reason, it won't work when I try to deploy to my existing production app server. I just get the error shown in the first post above.
I hope this makes some sense to someone. It's killing me at the moment :(
This is an accepted solution.
Thanks for reporting the issue. There was a flag added to your app as it was using EASDK. I just remove the flag. I will be with you with the deployment today. Let me know how it goes.
Yes, that's the one. Thanks SO much for your help and I apologize for the thread spam.
I'll certainly reach out on this as I go but I suspect this has resolved the issue. I typically wait for the active user count to drop since I'll be making DNS changes for this deployment but hopefully today!
Thanks again :)