Keeps asking for react package (@sanity/visual-editing)
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
when you say it asks for react, what is the exact message?
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
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-runtimenode 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
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!
@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.
I got the similar issue:
node_modules/.pnpm/[email protected]/node_modules/react/index.js?v=e42b851f' doesn't provide an export named: 'useSyncExternalStore'
Similar issue documented in #1277
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'
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!
@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'
@danielroe Any update on this. It's essentially making it so no one can upgrade to Nuxt 4.
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)
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.
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: @.***>
Same issue here as above.
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"
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 :)
Hello everyone! This package is not maintained by the Sanity people, but we're trying to get eyes on this from Nuxt's side ....
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.
Hey all, just checking what the current fix/solution for this is temporarily?
Hey all, just checking what the current fix/solution for this is temporarily?
I'm sticking with version 1.13.3 for now.
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.
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
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 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 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 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 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.
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.
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
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.
