Skip to content
Get help on Slack

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
Jan 30, 2023, 7:12 PM
...
Jan 30, 2023, 7:22 PM
Can you share more context? We can’t help you unless you help us understand your problem .
Jan 30, 2023, 7:37 PM
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.
Jan 30, 2023, 7:52 PM
I am trying to set up the embedded studio with live preview
Jan 30, 2023, 7:52 PM
I had everything working fantastic when set up along side it.
Jan 30, 2023, 7:53 PM
I started following this:
Jan 30, 2023, 7:54 PM
Jan 30, 2023, 7:54 PM
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
Jan 30, 2023, 7:57 PM
I am getting an error now that says "Module '"sanity"' has no exported member 'defineConfig'.ts(2305)View Problem"
Jan 30, 2023, 8:00 PM
Sounds like you may not have a 
sanity.config.ts
defined. Have you created that in the root directory of your app?
Jan 30, 2023, 8:06 PM
Yes, correct. I have defined, which is where I'm seeing the error. I can screenshot that file
Jan 30, 2023, 8:07 PM
sanity.ts, sanity.config.ts, and sanity.cli.ts all lived within a directory called "portfolio" which is where the sanity install was originally.
Jan 30, 2023, 8:09 PM
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.
Jan 30, 2023, 8:10 PM
Can you share your package.json?
Jan 30, 2023, 8:11 PM
Config looks good!
Jan 30, 2023, 8:11 PM
Thanks!
Jan 30, 2023, 8:12 PM
This is package.json
Jan 30, 2023, 8:13 PM
{
  "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"
  }
}
Jan 30, 2023, 8:13 PM
Hmm, maybe try deleting your node_modules and package-lock, then reinstalling? Those dependencies look correct.
Jan 30, 2023, 8:20 PM
I tried that, lol
Jan 30, 2023, 8:20 PM
Damn, lol
Jan 30, 2023, 8:21 PM
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.
Jan 30, 2023, 8:21 PM
Possibly! What’s in that file?
Jan 30, 2023, 8:21 PM
This is my sanity.ts file, which is in the root:
Jan 30, 2023, 8:21 PM
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);
Jan 30, 2023, 8:21 PM
Naw, that shouldn’t be interfering then.
Jan 30, 2023, 8:22 PM
I'm fine with moving this out of here and getting rid of the file (doing so clears the error)
Jan 30, 2023, 8:22 PM
But not sure right off hand where to put them.
Jan 30, 2023, 8:22 PM
Maybe I can just rename to something besides sanity.ts
Jan 30, 2023, 8:22 PM
I usually put my client configuration for my frontend like that in either a 
lib
or 
src
directory.
Jan 30, 2023, 8:23 PM
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
Jan 30, 2023, 8:23 PM
let me give that a try
Jan 30, 2023, 8:24 PM
👀
Jan 30, 2023, 8:25 PM
I think that worked?
Jan 30, 2023, 8:25 PM
No more errors. 🎉
Jan 30, 2023, 8:25 PM
what?
Jan 30, 2023, 8:25 PM
Nice! I did not think that would do it but good to know!
Jan 30, 2023, 8:25 PM
^^ Actual footage of me rn
Jan 30, 2023, 8:26 PM
😆
Jan 30, 2023, 8:27 PM
Relatable
Jan 30, 2023, 8:27 PM
user M
just a quick reminder, you’re the best helping people out here
Jan 30, 2023, 8:28 PM
Thanks Victor! That means a lot. I definitely needed that today 😄
Jan 30, 2023, 8:29 PM
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.
Jan 30, 2023, 9:53 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?