Nuxt: Breaking ESM Issue Prevents Using Nuxt 4

[rylanharper]

Describe the bug

Hey Sanity team, I just want to bring attention to a breaking issue on the @nuxtjs/sanity module, which is preventing many devs from upgrading to Nuxt v4. This is detailed in this issue thread here.

The main gist of everything is that whenever the sub-dependencies of Visual Editing change, this causes ESM compatibility issues that require constant updates to optimizeDeps in Vite. These dependencies often aren’t valid ESM, and whether or not they break depends on how they’re hoisted by the package manager. You can see Daniel Roe's response to this here.

This has become a recurring cat-and-mouse problem where fixes are temporary until the Sanity dependency tree changes again. I'm really not sure of the solution and its at the point where this is likely affecting many Nuxt/Vue developers looking to upgrade to the latest version of Nuxt (a lot pf agencies that I have contracted for now use Nuxt + Sanity for their tech stack).

Oddly enough, the only fix I have found is separating out the app repo from the studio repo for Sanity to work properly with Nuxt 4, but after many hours of testing, I still cannot find why this actually works. I also understand this non-monorepo approach is not optimal for a lot of devs.

I mainly just wanted to bring this to the attention of the Sanity Visual Editing team. Perhaps there is a fix for this, or something can be added to the Nuxt module to make things smoother.

To Reproduce

I believe another dev has created a repo here, to test this issue.

Expected behavior

The @nuxtjs/sanity should work with the latest version of Nuxt 4.

[rylanharper]

This actually may not be Visual Editing related, although thats where the issue (error messages) are often most found. After several hours this afternoon I believe I found the issue. See my comment here, on the original issue thread.

[stipsan]

With Sanity Studio v4 we finally set the minimum node version to >=20.19 <22 || >=22.12, which allows us to drop CJS on our own libraries in the future without that being a breaking change.
We want to align on native ESM without CJS moving forward. Even so, we can't control the format that react deps like react, react-dom, react-is, react-compiler-runtime and such is published as, which is likely to continue being CJS.
With that in mind it probably makes sense for us to publish a @sanity/visual-editing derivative package that can inline/bundle away the react specifics and publish a pure ESM output that can put an end to these issues affecting Nuxt 4, and other vite based frameworks that are now ESM native.

[rylanharper]

That would be amazing! I have no idea what would go into building that package, but hopefully it wouldn't be too crazy 😅