Troubleshooting embedding Sanity Studio into a Next.js app with live preview
43 replies
Last updated: Jan 30, 2023
K
I'm trying to embed studio into my app and set up live preview
K
...
Can you share more context? We can’t help you unless you help us understand your problem .
K
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.
K
I am trying to set up the embedded studio with live preview
K
I had everything working fantastic when set up along side it.
K
I started following this:
K
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
K
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.tsdefined. Have you created that in the root directory of your app?
K
Yes, correct. I have defined, which is where I'm seeing the error. I can screenshot that file
K
sanity.ts, sanity.config.ts, and sanity.cli.ts all lived within a directory called "portfolio" which is where the sanity install was originally.
K
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.
K
Thanks!
K
This is package.json
K
{
"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.
K
I tried that, lol
K
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.
K
This is my sanity.ts file, which is in the root:
K
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);K
I'm fine with moving this out of here and getting rid of the file (doing so clears the error)
K
But not sure right off hand where to put them.
K
Maybe I can just rename to something besides sanity.ts
K
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
K
let me give that a try
K
👀
K
I think that worked?
K
No more errors. 🎉
K
^^ Actual footage of me rn
K
😆
V
user M
just a quick reminder, you’re the best helping people out hereK
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.