Edit Button not appearing on Static Next.js

Hey,

So I can now close the preview toolbar which is great! Thanks for getting that fixed.

I'm still unable to use the edit mode button however. Is there something that needs to be enabled on my account? I noticed the preview script in my account is still the old version.

Please let me know of any way to help me debug if what I'm doing is wrong.

The toolbar state URL https://andru.prismic.io/toolbar/state resolves with data, but no button still.

I have the data-wio-id attribute on the article container with the document ID but that doesn't seem to help.

The toolbar predict URL resolves to an empty document array if that's helpful. I would have assumed it should include my document ID of the page in it. Not least the one I've passed in the data attribute on the article ID.

Hope you can help steer me in the right direction!

Hey Andru, can you try and check again and see if it works now, probably you'll need to do clear your cache and reload, but it should be good. Also, you should now see the new script in your repo. For this version, you can delete the data-wio-id attributes altogether.

Hi Paulina

Can now see the new script in my Prismic repo thanks.

Have updated, cleared cache and removed the attributes but I don't get anything rendering inside the Toolbar iframe.

I've deployed the built app to Vercel, where hopefully you can see something I'm missing?

Happy to setup a codesandbox if you need to see any specific implementation but I am using this Next.js template to evaluate Prismic, and have only added the preview script inside the <Head> in _document.js

Hope you can help! Sorry if it's just me being stupid.

So have managed to get the edit button to work on a purely client side react app, after forking this prismic template.

The next.js app I'm using uses getStaticProps. I'm going to try out the SSR methods next uses but would be good to know if this might be a limitation of the edit button? For example, does the Prismic API call need to be made client-side for the toolbar to magically know the document ID?

The next.js template also uses GraphQL, maybe that also is an issue for the edit button? Would hope not, but be good to know how the toolbar does find the correct document IDs.

Feel free to push me to the code or docs, if you'd rather not spend time explaining. I noticed the links to the edit button docs no longer work in the documentation site, maybe these are being worked on atm?

Hope you can help!

Hi Andru,

Sorry these replies were getting lost in the private message I'm going to make this topic public so we can figure it out.

This issue is really weird as we have tested with Next.js in both SSR and Static mode before and the button worked fine. What's stranger is that previously you showed that the preview module was present but not the edit button, even though they are technically both the same thing. This is making me think this might be something as simple as a css conflict.

The edit button and previews get their data from cookies coming from the Prismic Dashboard and the toolbar does a small api call, ?predict, to check what is the main document. This is all done with and iframe which is loaded on top of your project for logged in Prismic users.

You're correct that the edit button links in the documentation were broken, we've removed them now as these were outdated, since the preview script add's the button automatically and having these docs is confusing.

Can you send me your project in a zip file or give me a link to the github repo so I can investigate this?

It is strange, because the preview still works.

But the edit button just never renders. It's not a CSS issue unfortunately.

The ?predict request always just returns an empty array.

I've added the demo repo to github + made a codesandbox from it if its helpful.

Let me know if there's anything I can do to help!

Thanks, I'm looking in to it.

Awesome thanks!

I was a little hasty on my setup, but seems codesandbox doesn't support SSG, so here it is on Vercel.

That being said, unlike on localhost, the toolbar state/predict/devMode requests don't seem to happen on the Vercel URL. I wondered if that was because that domain wasn't added in the preview settings — but I've just added the Vercel domain now, but its still not making the requests there yet. Maybe it takes a little time :man_shrugging:t2:

Anyhow, hope that may help too!