sanity will not run locally - "Element type is invalid ..." error when running 'npm run dev about sanity

[binoy14]

@max888 how are you including Sanity component inside nextjs, from the code provided that shouldn't have any issues. Possible that the imports are incorrect in some place. If you can provide example recreating the issue it would help in debugging further.

[MohitGupta14]

I just clone it, it was working fine with pnpm.

[max888]

Hi @binoy14 I have a 'sanity' folder in the root of my nextjs application (outside of the app folder).

Then I have a file located in @/app/lib/sanity with the following code to connect to the client:

import { createClient } from 'next-sanity'
import imageUrlBuilder from '@sanity/image-url'

export const client = createClient({
  projectId: "xxxxxxx", // replaced with my real id
  dataset: "production",
  apiVersion: "2024-01-01",
  // unless you have caching for your front end, `useCdn` should be `true` for most production environments
  useCdn: true, 
})

const builder = imageUrlBuilder(client)

export function urlFor(source) {
  return builder.image(source)
}

Then throughout the nextjs app I import the sanity client or image builder in my components using:

import { urlFor } from "@/app/lib/sanity.js";
import { client } from "@/app/lib/sanity.js";

The weird thing is that if I extract/copy this 'sanity' folder somewhere outside of the nextjs application and run it using npm run dev, it works fine. It's only when I try and run it whilst inside the nextjs app that I get the issue. However, in the 'sanity' folder I'm not making any references to code in the nextjs app. I'm just defining schemas. That's why I'm not sure how there is an error there when trying to run it.

I will try and make an example recreating the issue to help debug.

[mariuslundgard]

Do you have a "baseUrl" configuration in your tsconfig.json?

[max888]

Hi @mariuslundgard thanks for following up. I am not using typescript for my project but in my jsconfig.json I have have a `"baseUrl" set like this:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

I 'fixed' the issue by moving the sanity part into a new sub folder within the project and it worked. Seemed to me like it could have been a weird npm caching issue. Although I had tried npm cache clean and a few other things with no luck.

My nextjs app folder structure was:

/app
    -layout.js
    - page.js
    - etc...
/sanity
    /schemaTypes
    -sanity.cli.js
    -sanity.config.js
    -package.json
    -etc...
jsconfig.json
next-config.mjs
package.json
...etc

I then moved the /sanity folder to a different subfolder at /new/sanity , ran npm run dev and it worked.