Get help on Discord

Troubleshooting embedding Sanity Studio into a Next.js app with live preview

43 replies
Last updated: Jan 30, 2023
I'm trying to embed studio into my app and set up live preview
...
Can you share more context? We can’t help you unless you help us understand your problem .
Just trying to set up sanity in my app, embedded... i'm not sure what happened to my original comment, it looks like it was removed.
I am trying to set up the embedded studio with live preview
I had everything working fantastic when set up along side it.
I started following this:
I had an existing nextjs app, with its own node_modules. Essentially, I moved all the dependencies from the sanity install into the dependencies within my nextjs app. I installed the dependancies, moved my schema files into the root directory, as well as my sanity.cli.ts and sanity.config.ts
I am getting an error now that says "Module '"sanity"' has no exported member 'defineConfig'.ts(2305)View Problem"
Sounds like you may not have a 
sanity.config.ts
defined. Have you created that in the root directory of your app?
Yes, correct. I have defined, which is where I'm seeing the error. I can screenshot that file
sanity.ts, sanity.config.ts, and sanity.cli.ts all lived within a directory called "portfolio" which is where the sanity install was originally.
I moved those three files, along with the schema dir, and the "deskStructure.ts" file out to the root directory, and then updated my package.json with the required packages for sanity. I did a npm install, to install those packages.
Can you share your package.json?
Config looks good!
Thanks!
This is package.json
{
  "name": "kc-portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^2.0.13",
    "@next/font": "13.1.4",
    "@portabletext/react": "^2.0.1",
    "@sanity/image-url": "^1.0.2",
    "@types/node": "18.11.18",
    "@types/react": "18.0.27",
    "@types/react-dom": "18.0.10",
    "eslint": "8.32.0",
    "eslint-config-next": "13.1.4",
    "framer-motion": "^8.5.0",
    "next": "13.1.4",
    "next-sanity": "^4.1.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.42.1",
    "react-simple-typewriter": "^5.0.1",
    "react-social-icons": "^5.15.0",
    "typescript": "4.9.4",
    "@sanity/vision": "^3.0.0",
    "sanity": "^3.0.0",
    "styled-components": "^5.2.0",
    "sanity-plugin-media": "^2.0.4"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwind-scrollbar": "^2.1.0",
    "tailwindcss": "^3.2.4",
    "@sanity/eslint-config-studio": "^2.0.1"
  }
}
Hmm, maybe try deleting your node_modules and package-lock, then reinstalling? Those dependencies look correct.
I tried that, lol
Damn, lol
It could be due to the fact that I have a sanity.ts file in there. But that was left over from my initial install.
Possibly! What’s in that file?
This is my sanity.ts file, which is in the root:
import { createClient } from "next-sanity";
import createImageUrlBuilder from "@sanity/image-url";

export const config = {
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
  apiVersion: "2021-10-21",
  useCdn: process.env.NODE_ENV === "production",
};

// Set up client to get data in getProps page function.
export const sanityClient = createClient(config);

export const urlFor = (source: any) =>
  createImageUrlBuilder(config).image(source);
Naw, that shouldn’t be interfering then.
I'm fine with moving this out of here and getting rid of the file (doing so clears the error)
But not sure right off hand where to put them.
Maybe I can just rename to something besides sanity.ts
I usually put my client configuration for my frontend like that in either a 
lib
or 
src
directory.
I think that would fix.... like I said, it was inside another directory to start... so I bet moving it to a src dir would fix, after updated imports
let me give that a try
👀
I think that worked?
No more errors. 🎉
what?
Nice! I did not think that would do it but good to know!
^^ Actual footage of me rn
😆
Relatable
user M
just a quick reminder, you’re the best helping people out here
Thanks Victor! That means a lot. I definitely needed that today 😄
Quick update - this worked. My initial issue was that santiy.ts file in my root. Once I moved that into a src dir, all issues cleared up and I was able to successfully get studio embedded in my app.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?