sanity icon indicating copy to clipboard operation
sanity copied to clipboard

Keeps asking for react package (@sanity/visual-editing)

Open Sfolkerts89 opened this issue 5 months ago • 34 comments

Version

module: Node 22 nuxt: 3.-- (exising project) and 4.latest from a new nuxt instance to debug

Nuxt configuration

export default defineNuxtConfig({
  devtools: { enabled: true },

  modules: ['@nuxt/ui', '@nuxt/eslint', '@nuxtjs/sanity'],

  css: ['~/assets/css/main.css'],

  compatibilityDate: '2025-07-16',
  sanity: {
		projectId: "----------",
		dataset: "production",
	},
})

Steps to reproduce

Load a new nuxt instance, run: npx nuxi@latest module add sanity npm install @sanity/image-url

As per Sanity docs

Additional information

I use yarn instead of npm, but that should not be an issue? I read there was a hotfix for this somewhere in December '24, but i still have this issue?

Initially i tried to add sanity in a Nuxt V3 boilerplate of mine, but ran into the issue. So figured i get a fresh and latest Nuxt project and run through the steps, but the issue pertains nonetheless

Sfolkerts89 avatar Aug 12 '25 08:08 Sfolkerts89

when you say it asks for react, what is the exact message?

danielroe avatar Aug 12 '25 09:08 danielroe

Hey Sfolkerts89 and danielroe!

i get a similar error but for the react-compiler-runtime node module, i tried this out:

removed the up arrow

"@nuxtjs/sanity": "^1.13.3",

and re installed and it works now, so theres definitely an issue introduced in a version after 1.13.3.

This was my error btw

Image

olivialacyatkinsonWaW avatar Aug 12 '25 09:08 olivialacyatkinsonWaW

when you say it asks for react, what is the exact message?

I get the following:

[plugin:vite:import-analysis] Failed to resolve import "react" from "node_modules/@sanity/visual-editing/dist/index.js?v=1d51627f". Does the file exist?

D:/Sites/0-10__testing/nuxt-hello-world/node_modules/@sanity/visual-editing/dist/index.js:7:50

5  |  import { enableVisualEditing } from "./_chunks-es/enableVisualEditing.js";
6  |  import { c } from "react-compiler-runtime";
7  |  import { useContext, useSyncExternalStore } from "react";
   |                                                    ^
8  |  import { createDataAttribute } from "@sanity/visual-editing-csm";
9  |  function useSharedState(key) {

Hey Sfolkerts89 and danielroe!

i get a similar error but for the react-compiler-runtime node module, i tried this out:

removed the up arrow

"@nuxtjs/sanity": "^1.13.3",

and re installed and it works now, so theres definitely an issue introduced in a version after 1.13.3.

This was my error btw Image

I was on Sanity 2.0.0, tried downgrading to 1.13.3 as mentioned, reinstalled but then got met with an error that said groq doesnt exist. Seems that 1.13.3 is incompatible with Nuxt 4. Ill give it a go on my Nuxt 3 project tho!

EDIT: downgrading to 1.13.3 did the trick in a Nuxt 3 project, thanks!

Sfolkerts89 avatar Aug 12 '25 10:08 Sfolkerts89

@danielroe

I have created a public repo with a basic new Nuxt 4 instance and Sanity 2,0.0, using Yarn:

https://github.com/Sfolkerts89/nuxt4-sanity-react-error

It should reproduce the mentioned error.

Sfolkerts89 avatar Aug 12 '25 12:08 Sfolkerts89

I got the similar issue:

node_modules/.pnpm/[email protected]/node_modules/react/index.js?v=e42b851f' doesn't provide an export named: 'useSyncExternalStore'

saikksub avatar Aug 12 '25 13:08 saikksub

Similar issue documented in #1277

th-km avatar Aug 12 '25 14:08 th-km

Same here! Clean install of Nuxt 4.0.3 + Sanity client 2.0.0.

The requested module '/_nuxt/@fs/Users/robindelaater/Developer/Suikerspin/ardesign/frontend/node_modules/react-compiler-runtime/dist/index.js?v=d287e40b' does not provide an export named 'c'

robindelaater avatar Aug 12 '25 16:08 robindelaater

Hi Sfolkerts89,

Sorry i did forget to mention i am developing using nuxt3 and using a older version of sanity, but very strange!

Hopefully a fix will come soon as!

olivialacyatkinsonWaW avatar Aug 12 '25 17:08 olivialacyatkinsonWaW

@danielroe Hey Daniel. Any estimation on this? Migrated to nuxt4 and looks like this is the only issue that left "@nuxtjs/sanity": 2.0.0

The requested module '/node_modules/react-compiler-runtime/dist/index.js?v=873f1594' does not provide an export named 'c'

yusupbugacheev avatar Sep 02 '25 11:09 yusupbugacheev

@danielroe Any update on this. It's essentially making it so no one can upgrade to Nuxt 4.

Slgoetz avatar Sep 09 '25 21:09 Slgoetz

I'm using nuxt 3.18.1 and getting this console error when upgrading to either 1.14.1 or 2.0.0 of this module. Version 1.13.3 is working for me.

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/react-compiler-runtime/dist/index.js?v=0d273f36' does not provide an export named 'c' (at mutations.js?v=0d273f36:1:10)

davidstackio avatar Sep 10 '25 03:09 davidstackio

Checking in on an update. I'm having the same issues mentioned above.

Nuxt 4.0.3 @nuxtjs/sanity 2.0.0

The requested module '/node_modules/.pnpm/[email protected][email protected]/node_modules/react-compiler-runtime/dist/index.js?v=91f67e22' does not provide an export named 'c'

Downgraded @nuxtjs/sanity to 1.13.3 and received the error useSanityQuery is not defined.

Tried @nuxtjs/sanity 1.14.1 and got the same error from 2.0.0.

BradPreston avatar Sep 14 '25 00:09 BradPreston

I ended up creating my own composable and using sanity client.

Sent from Outlook for iOShttps://aka.ms/o0ukef


From: Brad Preston @.> Sent: Sunday, September 14, 2025 1:52:50 AM To: nuxt-modules/sanity @.> Cc: Jamie Evans @.>; Manual @.> Subject: Re: [nuxt-modules/sanity] Keeps asking for react package @.***/visual-editing) (Issue #1284)

[https://avatars.githubusercontent.com/u/59844277?s=20&v=4]BradPreston left a comment (nuxt-modules/sanity#1284)https://github.com/nuxt-modules/sanity/issues/1284#issuecomment-3289027847

Checking in on an update. I'm having the same issues mentioned above.

Nuxt 4.0.3 @nuxtjs/sanity 2.0.0

The requested module @.@./node_modules/react-compiler-runtime/dist/index.js?v=91f67e22' does not provide an export named 'c'

Downgraded @nuxtjs/sanity to 1.13.3 and received the error useSanityQuery is not defined.

Tried @nuxtjs/sanity 1.14.1 and got the same error from 2.0.0.

— Reply to this email directly, view it on GitHubhttps://github.com/nuxt-modules/sanity/issues/1284#issuecomment-3289027847, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AHV355G4QZFCZET2XTF7AO33SS36FAVCNFSM6AAAAACDVX7F2GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTEOBZGAZDOOBUG4. You are receiving this because you are subscribed to this thread.Message ID: @.***>

Jamiemufu avatar Sep 14 '25 01:09 Jamiemufu

Same issue here as above.

sintj avatar Sep 15 '25 17:09 sintj

Same here, I need a stable version of nuxt + sanity working with visual editing, do you have one?

Back to "@nuxtjs/sanity": "1.13.1" and "nuxt": "3.17.7"

LucaArgentieri avatar Sep 19 '25 12:09 LucaArgentieri

Hey all, I posted this on the Sanity Discord #nuxt channel, but I am acutally able to get Nuxt v4 with Sanity working together when separating out my app and studio repos into a non-monorepo. However, I understand this is not ideal for many devs.

I have also posted this issue on the Sanity Discord #feedback channel here, but have received no reply. Perhaps I should post this on the @sanity/visual-editing repo? This seems to be a reoccurring patten with Nuxt and Visual Editing, likely stemming CJS/ESM type packages. It would be great if the Sanity team could just take a look at this like they do for Next and Svelte (not sure why Nuxt is somewhat left out in this).

Nevertheless, this issue needs to be looked at. Looking forward to an update when you have the time @danielroe :)

rylanharper avatar Sep 24 '25 18:09 rylanharper

Hello everyone! This package is not maintained by the Sanity people, but we're trying to get eyes on this from Nuxt's side ....

bobinska-dev avatar Sep 25 '25 14:09 bobinska-dev

the issue is the subdependencies coming in from sanity deps. many of them are not valid esm which is why they have to be added to optimizeDeps in vite.

unfortunately with every change in these deps, we have to update our code which works around these issues, and it can be very tricky as it depends whether these dependencies are hoisted by a package manager or not.

this is probably my top priority for this module, and i am absolutely tracking it, but even once i resolve it (as we have done before) it could be broken again by changes in the sanity dependency tree.

ideally we would find a way to avoid the cat-and-mouse game we are playing at the moment.

danielroe avatar Sep 25 '25 14:09 danielroe

Hey all, just checking what the current fix/solution for this is temporarily?

rylanharper avatar Oct 15 '25 18:10 rylanharper

Hey all, just checking what the current fix/solution for this is temporarily?

I'm sticking with version 1.13.3 for now.

davidstackio avatar Oct 15 '25 18:10 davidstackio

Edit: Correct fix is comment below this

I think I found the fix!! This whole issue was driving me crazy, even though it technically didn't affect me, because I've been using Nuxt 4 and this module together since the 2.0.0 release without any issues. So I went through my setup process this morning for new Nuxt/Sanity projects and I think I found where everything is coming from. Its not visual editing related, although that's where the issue appears most frequently.

The issue seems to be coming from the default groq import, like when used like this:

const POSTS_QUERY = groq`*[_type == "post"]{ _id, title }`

When I downloaded the test repos above, this kept throwing the current error you all see: The requested module '/node_modules/.pnpm/[email protected][email protected]/node_modules/react-compiler-runtime/dist/index.js?v=91f67e22' does not provide an export named 'c'.

However if you add groq to your package.json dependencies and destructure the query into a new folder (like /groq) or as a direct const, there is no error (keep in mind I always add groq and @sanity/client to my project dependencies to be safe and separate out my groq queries into a separate folder in the root of the project):

<script setup>
import { SEO_QUERY } from '@@/groq/queries/seo'

// Fetch Sanity data
const { data: seoData } = await useSanityQuery(SEO_QUERY)

// Response data
const seo = computed(() => seoData.value)

console.log(seo.value) // no error, just the value
</script>

or like this:

<script setup>
import groq from 'groq'

const SEO_QUERY = groq`
  *[_type == 'seo'][0] {
    _id,
    _type,
  }
`

// Fetch Sanity data
const { data: seoData } = await useSanityQuery(SEO_QUERY)

// Response data
const seo = computed(() => seoData.value)

console.log(seo.value) // no error, just the value
</script>

If another dev can test this out and confirm that would be great. I find no errors this way using a fresh Nuxt 4 project with the latest module version. I'm fairly confident this is the issue/fix.

rylanharper avatar Oct 20 '25 23:10 rylanharper

Lol actually, I was completely wrong above, the default groq import works fine. Seems that the issue is just that the studioUrl is required. Thats it. Thats the fix.

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxtjs/sanity'],
  sanity: {
    projectId: process.env.NUXT_SANITY_PROJECT_ID,
    dataset: process.env.NUXT_SANITY_DATASET,
    apiVersion: process.env.NUXT_SANITY_API_VERSION,
    visualEditing: {
      token: process.env.NUXT_SANITY_API_READ_TOKEN, // required
      studioUrl: process.env.NUXT_SANITY_STUDIO_URL, // required
      stega: false, // optional
    },
  },
})

And here is my Vue code:

<script setup>
const query = groq`*[_type == "seo"][0]{
  _id,
  _type,
}`

const { data } = await useSanityQuery(query)

console.log(data.value)
</script>

<template>
  <div>{{ data }}</div>
</template>

Add the studioUrl and there should be no error - you can use the module with Nuxt v4. FYI the module package does NOT say that this is a required field, when it is. Tagging you @danielroe

rylanharper avatar Oct 20 '25 23:10 rylanharper

May be part of a solution, but I'm still experiencing the 500 – The requested module '/_nuxt/@fs/Users/md/dev/portfolio/node_modules/.pnpm/[email protected][email protected]/node_modules/react-compiler-runtime/dist/index.js?v=fb308810' does not provide an export named 'c' error despite not currently using Visual Editing, running the nuxt cleanup script, and wiping node_modules and pnpm-lock.yaml before reinstalling. This is with nuxt at 4.1.3, and @nuxtjs/sanity at 2.0.0.

I've tried the optimizeDeps method for react, react-compiler-runtime, and react-dom, and although that does clear the error, it weirdly duplicates the content on the page, so is not a viable solution.

For client work I'm having to stay on nuxt at 3.19.1 and @nuxtjs/sanity at 1.13.3 for the time being just so it'll work.

It was first raised well over two months ago though, so really hoping for a fix soon so we can fully adopt Nuxt 4. I understand wanting to find a robust solution so it stops the current cat-and-mouse game, but even just a quick fix for now while that work continues would be appreciated 🙏

iamclydehoel avatar Oct 21 '25 12:10 iamclydehoel

@iamclydehoel Yeah you're right, that's the main issue: the module requires visual editing even if a dev is NOT using it, which shouldn't be the case.

And if you are using visual editing you need the studioUrl option, which is required (even though it's not specified as being a required option).

rylanharper avatar Oct 21 '25 14:10 rylanharper

@rylanharper Interesting. I've just gone through the Visual Editing setup, and can confirm it does clear the 500 error. However, it's basically in the same state as when using the optimizeDeps method. Hydration issues, where the page content is duplicated, as well as <SanityContent /> blocks not rendering at all 🤷‍♂️

iamclydehoel avatar Oct 21 '25 15:10 iamclydehoel

@iamclydehoel Hmm I dont think the hydration issues are module related.. Try clearing your browser cache and checking your CORS settings. I have about 4 projects with Nuxt 4 and Sanity and have yet to see any hydration issues, even on fresh projects. Also, the SanityContent changed in the 2.0.0 release and now uses @portabletext/vue. I have a basic SanityContent example on the #nuxt Sanity Discord channel here that you can reference.

rylanharper avatar Oct 21 '25 18:10 rylanharper

@rylanharper Thanks for the heads up with <SanityContent /> – that's now sorted. I'm still getting this weird duplication though, where the page fully renders, then below it renders again, just without images loading. This wasn't an issue on the site prior to upgrading, and neither is on sites that I've yet to upgrade, so would presume it's an issue introduced from the latest versions. However, I accept it seems unlikely now to be related to this specific topic, so will keep investigating myself.

iamclydehoel avatar Oct 22 '25 08:10 iamclydehoel

What is confusing to me is having issues related to visual editing, even when we are not using this feature, which is still a valid option. As documented here, we should be able to either turn visual editing to false or only enable it when the Sanity client is installed and used together with a visual editing configuration.

th-km avatar Oct 25 '25 15:10 th-km

The issue still remains. :(

It’s quite disappointing to see that the latest versions of @nuxtjs/sanity aren’t working as expected, even when following the official guides. I really appreciate all the hard work that goes into these projects, but it’s disheartening to encounter issues even in the most basic setup

adalberth avatar Oct 27 '25 12:10 adalberth

I ended up creating my own composable and using sanity client.

Sent from Outlook for iOShttps://aka.ms/o0ukef

Could you provide the source code for this?

Feels like we just need a simple solution to use for now instead of relying on this module.

CalebKester avatar Oct 27 '25 13:10 CalebKester