Can't embed next-studio in Next.js (v15) app - Webpack TypeError - createContext is not a function

[NathZ1]

Describe the bug

The issue may be related due to Webpack eagerly resolving modules that aren't used? It seems like sanity exports a bunch of things with barrel exports - is it possible client side code is getting mixed up with server side code perhaps?

The error -

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at (rsc)/./node_modules/sanity/lib/_singletons.mjs (C:\dev\web\web-intranet\.next\server\vendor-chunks\sanity.js:280:1)
    at __webpack_require__ (C:\dev\web\web-intranet\.next\server\webpack-runtime.js:33:43)
    at (rsc)/./node_modules/sanity/lib/index.mjs (C:\dev\web\web-intranet\.next\server\vendor-chunks\sanity.js:290:1)
    at __webpack_require__ (C:\dev\web\web-intranet\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/app/studio/[[...tool]]/page.tsx:11:64)
    at (rsc)/./src/app/studio/[[...tool]]/page.tsx (C:\dev\web\web-intranet\.next\server\app\studio\[[...tool]]\page.js:456:1)
    at Function.__webpack_require__ (C:\dev\web\web-intranet\.next\server\webpack-runtime.js:33:43) {
  type: 'TypeError',
  page: '/studio'

I tried to import defineConfig directly, but couldn't. Interestingly, I did see some folders that seemed related to the error (_createContext, _singletons) -

To Reproduce

Steps to reproduce the behavior:

Here is a slimmed down representation. Normally i wouldn't include everything in the single file, but it makes no difference either way and this is the simplest reproduction of the error -

import { defineConfig } from 'sanity'
import { structureTool } from 'sanity/structure'
import { NextStudio } from 'next-sanity/studio'

const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!
const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET!

export const config = defineConfig({
  basePath: '/studio',
  projectId,
  dataset,
  plugins: [structureTool()],
  schema: { types: [] }
})

export const dynamic = 'force-static'

export { metadata, viewport } from 'next-sanity/studio'

export default function StudioPage() {
  return <NextStudio config={config} />
}

Expected behavior
Able to embed sanity studio without app crashing.

Which versions of Sanity are you using?
[email protected] (installed today)
@sanity/cli (global) 3.70.0 (up to date)
@sanity/image-url 1.1.0 (up to date)

What operating system are you using?
Windows 10 pro

Which versions of Node.js / npm are you running?
npm - 10.8.3
node - 20.11.1

Additional context
None that I can think of, but happy to help debug / troubleshoot as required to get to the bottom of this.

[tbrasington]

The solution I had for running webpack and the app router is to wrap the studio in a 'use client' component

e.g.

page.tsx

import { Wrapper } from "./studio-wrapper";

export const dynamic = "force-static";

export { metadata, viewport } from "next-sanity/studio";

export default function StudioPage() {
  return <Wrapper />;
}

Wrapper.tsx

"use client";
import config from "./../../../../sanity.config";

import { NextStudio } from "next-sanity/studio";

export function Wrapper() {
  return <NextStudio config={config} />;
}

[NathZ1]

Thanks for your comment! Respectfully, that is not documented in next-sanity install instructions, and could potentially bleed secrets through the client app depending on the auth pattern used. I definitely want to keep the studio on the node server, and nothing indicates that this isn't possible?  Surely it's a bug / regression?

[tbrasington]

Documentation suggests you can 'use client'

https://github.com/sanity-io/next-sanity?tab=readme-ov-file#embedded-sanity-studio

// ./src/app/studio/[[...tool]]/page.tsx

'use client'

import {NextStudio} from 'next-sanity/studio'
import {StudioProvider, StudioLayout} from 'sanity'

import config from '../../../sanity.config'

function StudioPage() {
  return (
    <NextStudio config={config}>
      <StudioProvider config={config}>
        {/* Put components here and you'll have access to the same React hooks as Studio gives you when writing plugins */}
        <StudioLayout />
      </StudioProvider>
    </NextStudio>
  )
}

Regarding secrets, take a look at their recommendations https://www.sanity.io/docs/environment-variables#c22c023216f9

[NathZ1]

Good pickup!

Interesting however that the only time in the linked doco that 'use client' declaration is used is in your linked snippet, which is titled "Lower-level control with StudioProvider and StudioLayout". The 2 example code snippets above it (same doco), specifically 'Studio route with App Router", have no mention of the same declaration.

// ./src/app/studio/[[...tool]]/page.tsx

import {NextStudio} from 'next-sanity/studio'
import config from '../../../../sanity.config'

export const dynamic = 'force-static'

export {metadata, viewport} from 'next-sanity/studio'

export default function StudioPage() {
  return <NextStudio config={config} />
}

// ./src/app/studio/[[...tool]]/page.tsx

import type {Metadata, Viewport} from 'next'
import {metadata as studioMetadata, viewport as studioViewport} from 'next-sanity/studio'

// Set the correct `viewport`, `robots` and `referrer` meta tags
export const metadata: Metadata = {
  ...studioMetadata,
  // Overrides the title until the Studio is loaded
  title: 'Loading Studio...',
}

export const viewport: Viewport = {
  ...studioViewport,
  // Overrides the viewport to resize behavior
  interactiveWidget: 'resizes-content',
}

export default function StudioPage() {
  return <NextStudio config={config} />
}

If next-sanity MUST be run on the client, it should be explicitly called out in the documentation, and the examples updated to use 'use client' declaration.