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

[lhoucinecherif]

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

Version

@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)

Nuxt configuration

sanity: {
    projectId: process.env.NUXT_ENV_SANITY_PROJECT_ID,
    dataset: process.env.NUXT_ENV_SANITY_DATASET,
    useCdn: true, // `false` if you want to ensure fresh data
    apiVersion: process.env.NUXT_SANITY_API_VERSION || '2024-03-15',
    // minimal: false,
    visualEditing: {
      studioUrl: process.env.NUXT_SANITY_STUDIO_URL || 'http://localhost:3333',
      token: process.env.NUXT_SANITY_API_READ_TOKEN,
      // mode: 'live-visual-editing',
      stega: false,
      zIndex: 9999,
    },
  },

Reproduction

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.

What is expected?

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

What is actually happening?

Getting error message on production: Unable to connect to visual editing. Make sure you've setup '@sanity/visual-editing' correctly

Additional information

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

Operating system

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

Versions of Node.js / npm :

npm : 10.8.1 node : v20.15.0

Screenshots

https://imgur.com/a/SCTC8hU

Checklist

• [x] I have tested with the latest Nuxt version and the issue still occurs
• [x] I have tested with the latest module version and the issue still occurs
• [x] I have searched the issue tracker and this issue hasn't been reported yet

[danielroe]

Are you sure you have configured all those environment variables correctly on Vercel?

[jeffreyroulston]

Faced into this issue over the past day.

It occurs when you are trying to enable the preview mode from a seperate host due to the set-cookie header being 'SameSite=Lax'.

To resolve this you need to create a server middleware to modify the set-cookie response header for the 307 redirect.

cookie.replace('SameSite=Lax', 'SameSite=None; Secure')

Seems to be an issue also affecting Remix, but its related to the response headers

[AldebaranPrimo]

I have the same problem reported by @lhoucinecherif . Compared to him I see the "401 invalid secret" error on the site page. But this problem occurs only if I publish on a Vercel Pro account. Using a Vercel Hobby the visual editing works perfectly (as well as in localhost). I know that Vercel Pro has its own integration mechanism with Sanity, could this be interfering with the visual editing?