Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Embedded Sanity displays blank page when using --turbo #1621

Open
dmorda opened this issue Jul 26, 2024 · 9 comments
Open

Embedded Sanity displays blank page when using --turbo #1621

dmorda opened this issue Jul 26, 2024 · 9 comments

Comments

@dmorda
Copy link

dmorda commented Jul 26, 2024

Describe the bug

I'm using Next.js with an embedded Sanity Studio that is accessible at the /studio route. When I use next dev to do local development the studio functions correctly. However, when I use next dev --turbo I get a blank page with no visible errors in the browser console or terminal output.

To Reproduce

  1. Run npx create-next-app next-sanity-starter and go with the defaults as prompted.
  2. Run cd next-sanity-starter.
  3. Run npx sanity init and setup an empty project that uses /studio for the route.
  4. Run npx next dev.
  5. Go to http://localhost:3000/studioand notice that it loads successfully.
  6. Run npx next dev --turbo
  7. Go to http://localhost:3000/studio and notice that it displays a blank page.

Expected behavior

The studio renders the default landing page.

Screenshots
studio-error

Which versions of Sanity are you using?

$ sanity versions
@sanity/cli (global)  3.49.0 (latest: 3.52.2)
@sanity/image-url      1.0.2 (up to date)
@sanity/vision        3.52.2 (up to date)
sanity                3.52.2 (up to date)

$ npm list
[email protected]
├── @sanity/[email protected]
├── @sanity/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

What operating system are you using?

macOS Sonoma 14.5

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

$ npm -v && node -v
10.8.2
v20.15.1
@saurabhje
Copy link

Hello, can you attach the trace file content? To generate a trace file - .next/trace.log
You would have to run this command with Turbo flag - next dev --turbo NEXT_TURBOPACK_TRACING=1

@dmorda
Copy link
Author

dmorda commented Jul 31, 2024

The trace.log file was about 177MB, so I uploaded it to dropbox since GitHub only supports file uploads up to 25MB.

https://www.dropbox.com/s/mjykfjwu41xts83/trace.log?dl=0

@stipsan
Copy link
Member

stipsan commented Aug 6, 2024

Hi, could you try the latest canary? npm i next@canary --save-exact 🙌

@dmorda
Copy link
Author

dmorda commented Aug 7, 2024

Installed next@canary --save-exact and also had to upgrade to React 19 RC. Once I did that I was able to run npm run dev and the Next template website and Sanity Studio worked. However, when I did npx next dev --turbo the Next template website loaded, but the Sanity Studio output a bunch of errors.

⨯ Error: Could not parse module '[project]/node_modules/next/dist/server/route-modules/app-page/vendored/contexts/loadable.js'
    at Object.<anonymous> (/Users/username/Desktop/next-sanity-starter/.next/server/chunks/ssr/node_modules_798a95._.js:162:11)
    at [project]/node_modules/next/dist/server/route-modules/app-page/vendored/contexts/loadable.js [app-rsc] (ecmascript) (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/node_modules_798a95._.js:165:3)
    at instantiateModule (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:572:23)
    at getOrInstantiateModuleFromParent (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:624:12)
    at commonJsRequire (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:146:20)
    at Object.<anonymous> (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/node_modules_798a95._.js:198:73)
    at [project]/node_modules/next/dist/shared/lib/dynamic.js [app-rsc] (ecmascript) (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/node_modules_798a95._.js:299:3)
    at instantiateModule (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:572:23)
    at getOrInstantiateModuleFromParent (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:624:12)
    at commonJsRequire (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:146:20)
    at Object.<anonymous> (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/node_modules_798a95._.js:302:18)
    at [project]/node_modules/next/dynamic.js [app-rsc] (ecmascript) (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/node_modules_798a95._.js:304:3)
    at instantiateModule (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:572:23)
    at getOrInstantiateModuleFromParent (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:624:12)
    at esmImport (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at /Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/node_modules_798a95._.js:313:135
    at [project]/node_modules/next-sanity/dist/studio.js [app-rsc] (ecmascript) <locals> (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/node_modules_798a95._.js:331:3)
    at instantiateModule (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:572:23)
    at getOrInstantiateModuleFromParent (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:624:12)
    at esmImport (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at /Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[root of the server]__91df1f._.js:118:168
    at [project]/app/studio/[[...tool]]/page.tsx [app-rsc] (ecmascript) <locals> (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[root of the server]__91df1f._.js:136:3)
    at instantiateModule (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:572:23)
    at getOrInstantiateModuleFromParent (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:624:12)
    at esmImport (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at /Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[root of the server]__91df1f._.js:143:164
    at [project]/app/studio/[[...tool]]/page.tsx [app-rsc] (ecmascript) <module evaluation> (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[root of the server]__91df1f._.js:146:3)
    at instantiateModule (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:572:23)
    at getOrInstantiateModuleFromParent (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:624:12)
    at esmImport (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at /Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[root of the server]__91df1f._.js:170:176
    at [project]/app/studio/[[...tool]]/page.tsx [app-rsc] (ecmascript) <facade> (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[root of the server]__91df1f._.js:174:3)
    at instantiateModule (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:572:23)
    at getOrInstantiateModuleFromParent (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:624:12)
    at esmImport (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at /Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[root of the server]__91df1f._.js:177:32
    at [project]/app/studio/[[...tool]]/page.tsx [app-rsc] (ecmascript, Next.js server component) <facade> (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[root of the server]__91df1f._.js:179:3)
    at instantiateModule (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:572:23)
    at getOrInstantiateModuleFromParent (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:624:12)
    at esmImport (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at /Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/node_modules_798a95._.js:3848:199
    at [project]/node_modules/next/dist/esm/build/templates/app-page.js?page=/studio/[[...tool]]/page { COMPONENT_0 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js server component)", COMPONENT_1 => "[project]/node_modules/next/dist/client/components/not-found-error.js [app-rsc] (ecmascript, Next.js server component)", COMPONENT_2 => "[project]/app/studio/[[...tool]]/page.tsx [app-rsc] (ecmascript, Next.js server component) <facade>" } [app-rsc] (ecmascript) <module evaluation> (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/node_modules_798a95._.js:3856:3)
    at instantiateModule (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:572:23)
    at getOrInstantiateModuleFromParent (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:624:12)
    at esmImport (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:132:20)
    at /Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/node_modules_798a95._.js:4004:796
    at [project]/node_modules/next/dist/esm/build/templates/app-page.js?page=/studio/[[...tool]]/page { COMPONENT_0 => "[project]/app/layout.tsx [app-rsc] (ecmascript, Next.js server component)", COMPONENT_1 => "[project]/node_modules/next/dist/client/components/not-found-error.js [app-rsc] (ecmascript, Next.js server component)", COMPONENT_2 => "[project]/app/studio/[[...tool]]/page.tsx [app-rsc] (ecmascript, Next.js server component) <facade>" } [app-rsc] (ecmascript) <facade> (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/node_modules_798a95._.js:4008:3)
    at instantiateModule (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:572:23)
    at instantiateRuntimeModule (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:632:12)
    at Object.getOrInstantiateRuntimeModule (/Users/usernam/Desktop/next-sanity-starter/.next/server/chunks/ssr/[turbopack]_runtime.js:647:12) {
  code: 'MODULE_UNPARSEABLE',
  page: '/studio'
}

I've also attached a screenshot of the error.
CleanShot 2024-08-06 at 20 24 48

@afullsnack
Copy link

Currently getting the same issue with next 15-rc and react 19-rc, when using --turbo flag with next dev command, has it been confirmed to be a compatibility issue with the turbo build system in next? and is there a fix?

@dohooo
Copy link

dohooo commented Aug 31, 2024 •
edited
Loading

Same problem. Any updates? more details

@xavortm
Copy link

xavortm commented Sep 25, 2024

Confirming the problem still exists.

A temporary "fix" is to remove —turbo as described above, but I guess removing turbo is not the idea of using turbo hmm. Tested with moving the sanity config in another project; tested even by cloning this repo as-is (which throws other errors).

@stipsan
Copy link
Member

stipsan commented Oct 15, 2024

Hi ya'll 👋
Could you give v9.5.3 a go and tell me if it solves it for you?

@dmorda
Copy link
Author

dmorda commented Oct 17, 2024 •
edited
Loading

Good news! Using the instructions in my original report it seems to work properly. It's a blank schema, but the Studio loads. I then tried it on my existing, up-to-date, Sanity/Next setup. The new wrinkle is that in my existing project I'm still getting some errors. A few of sections load in the Studio, but others often have an error like this:

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.

I'm using v9.5.4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@stipsan @dmorda @xavortm @afullsnack @dohooo @saurabhje