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

[max888]

I have a sanity project running in a subfolder of my NextJS project.

It was running fine locally then I stopped then restarted the local server with npm run dev and got the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I've checked my import/exports of my schemas. They all use curly braces and use the following syntax:

import {defineField, defineType} from 'sanity'

export const categoryType = defineType({
  name: 'category',
  title: 'Categories',
  type: 'document',
  fields: [
    defineField({
      name: 'name',
      type: 'string',
      title: 'Name of category'
    }),
  ],
})

Then in index.js

import {productType} from './productType'
import {categoryType} from './categoryType'

export const schemaTypes = [productType, categoryType]

I tried deleting all node modules and .sanity folder then re-installing. Updated node modules etc. With no luck.

Expected behavior

The local server to run on localhost:3333

Screenshots

Which versions of Sanity are you using?

@sanity/cli (global) 3.39.0 (up to date)
@sanity/eslint-config-studio 4.0.0 (up to date)
@sanity/vision 3.39.0 (up to date)
sanity 3.39.0 (up to date)

What operating system are you using?

Mac OS Sonoma 14.2.1

Which versions of Node.js / npm are you running?

10.5.0
v20.12.2

Additional context

I'm reasonably new to React and this seems to be a common issue when importing modules using curly braces or not. However this particular issuse has me stumped as I did not change anything in the sanity project so am not sure why it's refusing to run.

[MohitGupta14]

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

[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.

[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.