Unable to connect to visual editing in Sanity with Nuxt on Vercel

[lhoucinecherif]

Describe the bug

I am encountering an issue with the Sanity visual editing tool in my Nuxt application hosted on Vercel. The error message displayed is: PresentationTool-d136ce86.js:78 Unable to connect to visual editing. Make sure you've setup '@sanity/visual-editing' correctly

To Reproduce

Steps to reproduce the behavior:

1. Set up a Nuxt application with Sanity integration.
2. Configure visual editing as per the Sanity Nuxt documentation.
3. Deploy the application to Vercel.
4. Attempt to use the visual editing tool (Presentation tool) in production.

Expected behavior

The visual editing tool should connect and function correctly in the production environment, as it does in the local development environment.

Screenshots

https://imgur.com/a/SCTC8hU

Which versions of Sanity are you using?

@sanity/cli (global) 3.52.0 (latest: 3.54.0) @sanity/code-input 4.1.4 (up to date) @sanity/color-input 3.1.1 (up to date) @sanity/eslint-config-studio 3.0.1 (latest: 4.0.0) @sanity/hierarchical-document-list 2.0.0 (up to date) @sanity/icons 3.3.1 (up to date) @sanity/vision 3.54.0 (up to date) sanity 3.54.0 (up to date)

What operating system are you using?

Distributor ID: Ubuntu Description: Ubuntu 22.04.4 LTS Release: 22.04 Codename: jammy

Which versions of Node.js / npm are you running?

npm : 10.8.1 node : v20.15.0

Additional information

• The application works fine on localhost.
• All packages are updated to the latest versions.

[WarboxLiam]

I'm also getting this.

For me, every time they update the guide to adding sanity previews there is another big issue that prevents it from being implemented.

I've only successfully implemented it once, and the current instructions are very different to how I did it following an older version of their guide.