Unable to get Sanity visual editor working with nuxt site locally

[cadamsdev]

Notes

• I tried following the docs for this repo.
• I also tried following Sanity's docs

Version

module: 1.13.2
nuxt: 3.14.1592

Nuxt configuration

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: false },
  modules: ['@nuxtjs/sanity'],
  sanity: {
    projectId: 'v39h2x7o',
    dataset: 'production',
    apiVersion: '2021-03-25', // required
    visualEditing: {
      token: process.env.NUXT_SANITY_VISUAL_EDITING_TOKEN,
      studioUrl: 'http://localhost:3333',
    },
  },
});

Reproduction

1. Create a new sanity project
2. Checkout repo
   https://github.com/cadamsdev/nuxt-sanity-visual-editor-example
3. Change the sanity project id in both cms and web folders
   https://github.com/cadamsdev/nuxt-sanity-visual-editor-example/blob/main/apps/cms/sanity.cli.ts#L5
   https://github.com/cadamsdev/nuxt-sanity-visual-editor-example/blob/main/apps/cms/sanity.config.ts#L11
   https://github.com/cadamsdev/nuxt-sanity-visual-editor-example/blob/main/apps/web/nuxt.config.ts#L7
4. In sanity
   • Create a "viewer" api key
     https://www.sanity.io/manage/personal/project/<project_id>/api#tokens
   • Add cors origin for "http://localhost:3000", check "Allow credentials"
5. Rename .env.example to .env
6. Add env var for NUXT_SANITY_VISUAL_EDITING_TOKEN from step 4
7. Run npm i && npm run dev
8. Go to http://localhost:3333
9. Create a movie (Just need the title for this to work)
10. Go to the presentation tab in sanity studio http://localhost:3333/presentation you should get the error mentioned below.

Link:
https://github.com/cadamsdev/nuxt-sanity-visual-editor-example

What is expected?

I should be able to use Sanity visual editor with nuxt.

What is actually happening?

I am getting error while trying to view my nuxt site using sanity studio in the presentation tab.

500
"undefined" is not valid JSON

at JSON.parse ()
at setupFetcher (http://localhost:3000/_nuxt/@fs/home/crazypanda/workspaces/nuxt-sanity-visual-editor-example/node_modules/@nuxtjs/sanity/dist/runtime/composables/visual-editing.js?v=ccddcf37:125:14)
at useSanityQuery (http://localhost:3000/_nuxt/@fs/home/crazypanda/workspaces/nuxt-sanity-visual-editor-example/node_modules/@nuxtjs/sanity/dist/runtime/composables/visual-editing.js?v=ccddcf37:155:7)
at http://localhost:3000/_nuxt/app.js:18:98
at withAsyncContext (http://localhost:3000/_nuxt/@fs/home/crazypanda/workspaces/nuxt-sanity-visual-editor-example/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=ccddcf37:3396:19)
at setup (http://localhost:3000/_nuxt/app.js:18:74)
at callWithErrorHandling (http://localhost:3000/_nuxt/@fs/home/crazypanda/workspaces/nuxt-sanity-visual-editor-example/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=ccddcf37:197:19)
at setupStatefulComponent (http://localhost:3000/_nuxt/@fs/home/crazypanda/workspaces/nuxt-sanity-visual-editor-example/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=ccddcf37:7923:25)
at setupComponent (http://localhost:3000/_nuxt/@fs/home/crazypanda/workspaces/nuxt-sanity-visual-editor-example/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=ccddcf37:7884:36)
at mountComponent (http://localhost:3000/_nuxt/@fs/home/crazypanda/workspaces/nuxt-sanity-visual-editor-example/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=ccddcf37:5240:7)

Additional information

Checklist

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

Screenshot

[silvio-e]

I experience also a json error after upgrading from 1.13.1 to 1.13.2:

500

JSON.parse: unexpected character at line 1 column 1 of the JSON data`

[cadamsdev]

@silvio-e

Just tested downgrading @nuxtjs/sanity from 1.13.2 to 1.13.1 and yeah, you're right that works. So yeah, looks like there's a regression.

[cadamsdev]

Ok found the issue.

It's a regression from this change.

The code is not checking if params is undefined before trying stringify and parse it.

Changing

      const fetcher = sanity.queryStore!.createFetcherStore<T, E>(
        query,
        JSON.parse(JSON.stringify(params)),
        undefined,
      )

to

      const fetcher = sanity.queryStore!.createFetcherStore<T, E>(
        query,
        params ? JSON.parse(JSON.stringify(params)) : undefined,
        undefined,
      )

fixed it.

Note: params can be undefined
e.g

const { data: movies, encodeDataAttribute } = await useSanityQuery<QueryResult[]>(query)

A temp workaround would be to pass an empty object to the second argument so params is not undefined

const { data: movies, encodeDataAttribute } = await useSanityQuery<QueryResult[]>(query, {})