Errors or timeouts when running studio with `--turbo` flag

[markomitranic]

Describe the bug

Sanity studio no longer working in development, when running in turbo dev mode. Running a studio, according to the guide within this repository is broken with the following error:

Error: Module [project]/node_modules/sanity/lib/_chunks-es/pane.mjs [app-client] (ecmascript, async loader) was instantiated because it was required from module [project]/node_modules/sanity/lib/_chunks-es/index3.mjs [app-client] (ecmascript), but the module factory is not available. It might have been deleted in an HMR update.
Error: Module [project]/node_modules/sanity/lib/_chunks-es/pane.mjs [app-client] (ecmascript, async loader) was instantiated because it was required from module [project]/node_modules/sanity/lib/_chunks-es/index3.mjs [app-client] (ecmascript), but the module factory is not available. It might have been deleted in an HMR update.
    at instantiateModule (http://localhost:3000/_next/static/chunks/node_modules_next_dist_esm_build_templates_app-page_acc3d3.js:494:15)
    at getOrInstantiateModuleFromParent (http://localhost:3000/_next/static/chunks/node_modules_next_dist_esm_build_templates_app-page_acc3d3.js:609:12)
    at commonJsRequire (http://localhost:3000/_next/static/chunks/node_modules_next_dist_esm_build_templates_app-page_acc3d3.js:146:20)
    at http://localhost:3000/_next/static/chunks/node_modules_091980._.js:896:194
    at lazyInitializer (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react_a1d82d._.js:1767:32)
    at mountLazyComponent (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js:14571:29)
    at beginWork$1 (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js:15959:32)
    at beginWork (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js:22853:28)
    at performUnitOfWork (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js:21895:24)
    at workLoopSync (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js:21660:17)
    at renderRootSync (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js:21627:21)
    at recoverFromConcurrentError (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js:20929:30)
    at performSyncWorkOnRoot (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js:21176:34)
    at flushSyncWorkAcrossRoots_impl (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js:7079:33)
    at flushSyncWorkOnAllRoots (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js:7045:13)
    at processRootScheduleInMicrotask (http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js:7167:13)
    at http://localhost:3000/_next/static/chunks/node_modules_next_dist_compiled_react-dom_cjs_react-dom_development_c9a189.js:7313:21

To reproduce, I have used the latest official nextjs bug reproduction project. And only added studio to it, according to the appdir readme of this repository.

To Reproduce

Steps to reproduce the behavior:

1. Clone my reproduction repository you will find it has 2 commits. The initial commit with nextjs only, and a second commit that adds the Sanity Studio.
2. Install dependencies npm i
3. Specify any project in the env file cp .env.dist .env.local
4. You have 2 scripts available npm run dev and npm run dev:turbo.
5. Visit http://localhost:3000/studio the first page may work, but any further clicks will crash the tool entirely. For example click on the Pages item, or try to add a new Page.

In other reproductions, for example when using on real projects with plugins and similar, the symptoms vary from not being able to load studio at all, due to 100% timeout rate - to working fine but turning the CPU into a toaster oven.

Expected behavior

The studio should work as it normally does, and as it does without the turbo flag.

I've tried various next-sanity and next versions, down to 14.0.0 and 7.0.0, and this never seems to work correctly.

If using turbo is not yet possible (I'm aware turbo is beta and not all test are passing) perhaps we should write something about this in the readme for this repo, and for the sanity repo, for the time being. It's fairly straightforward when faced with an error like this, but It's been a lot of trouble figuring this out, in cases where it was just consuming our whole CPUs, as we had no idea that studio was the one that was jacking up the next process.

Screenshots

![Uploading Screenshot 2024-04-14 at 11.53.05.png…]()

Which versions of Sanity are you using?

@sanity/cli (global) 3.37.2 (up to date)

// Only Sanity dependency in the package.json. "next-sanity": "9.0.2",

What operating system are you using?

macOS Sonoma 14.4.1 (23E224)

Which versions of Node.js / npm are you running?

10.2.4 v20.11.1

[stipsan]

Hi @markomitranic, we're investigating this issue with our friends at Vercel 🙌 Will keep you posted

[stipsan]

Hey @markomitranic, could you try npm i next@canary --save-exact?

They've pushed a fix to the underlying turbopack build 🙌

[spencerbeggs]

@stipsan I had the same issue and following your instructions resolved it.

[markomitranic]

I can also confirm it seems to work just fine now :) @stipsan I wonder what caused it, its obviously on the turbo end, but also has to be something the studio does that triggered it, quite interesting stuff

[stipsan]

There's more information in the related fix in turbo here: https://github.com/vercel/turbo/pull/7959

It's probably related to us shipping Node ESM native support in v3.37.0: https://github.com/sanity-io/sanity/releases/tag/v3.37.0

Before that node in ESM mode would be redirected back to CJS mode by using the CJS ESM re-export pattern, as we had node.import export conditions for it. In other words in a lot of frameworks, Next.js included, whenever you imported sanity you always got the CJS code. I'm not sure if that's related but that's the only change we made that could've caused a change to bundler behavior recently 🤷

[spencerbeggs]

@stipsan FYI, I bumped to Sanity 3.39.0 and Next 14.2.2 this morning and the issue is no longer present.