Feature request: Sanity v3 support

[mosesoak]

Hi, we're loving this tool but after upgrading Sanity to its v3 dev-preview, it now gives an error TypeError: types.filter is not a function, presumably because the config entry point is now different.

I posted a question about whether v3 will feature type exporting here: https://github.com/sanity-io/sanity/discussions/3343#discussioncomment-3531595 -- it's still in development so potentially could be something they could add.

If it helps you jump in to make a v3-compatible version, here's how we have our project set up:

  "scripts": {
    "start": "sanity start",
    "build": "sanity build",
    "typegen": "sanity-codegen",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\""
  },
  "dependencies": {
    "@sanity/vision": "^3.0.0-dev-preview.15",
    "eslint": "^8.23.0",
    "prop-types": "^15.7",
    "react": "^17.0",
    "react-dom": "^17.0",
    "sanity": "^3.0.0-dev-preview.15",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
    "@sanity/types": "^3.0.0-dev-preview.15",
    "prettier": "^2.7.1",
    "sanity-codegen": "^0.9.8"

sanity.config.ts

export default createConfig({
  name: '---',
  projectId: '---',
  dataset: 'production',
  plugins: [deskTool(), visionTool],
  schema: {
    types: [
      personDoc,
      clientDoc,
      projectDoc,
      jobDoc,
      newsItem,
      articleDoc,
    ],
  },
});

Thanks for considering it!

[alexbchr]

I agree that proper Sanity v3 support would be great! In the meantime, here is what I did to have the tool work in Sanity v3.

The idea is to have an index.ts file that exports all the schema types as a default export and that the  sanity-codegen CLI can actually trigger the type creation. Since the schema configuration didn't change much between Sanity V2 and V3, this seems to properly generate the types for me.

// src/schemas/index.ts
const schemas: SchemaTypeDefinition[] = [
  personDoc,
  clientDoc,
  projectDoc,
  jobDoc,
  newsItem,
  articleDoc,
]

export default schemas

// sanity.config.ts
import schemas from './src/schemas'
//... later in the config
schema: { types: schemas }

Along with that, you'll also need to create a sanity-codegen.config.ts file if not already created, with the following content:

import { SanityCodegenConfig } from 'sanity-codegen'

const config: SanityCodegenConfig = {
  schemaPath: './src/schemas/index',
  // Uncomment below to change output path
  // outputPath: './src/utils/types/schema/generated-schema-types.ts',
  babelOptions: {
    // Plugins are copy pasted from https://github.com/ricokahler/sanity-codegen/blob/main/src/cli.ts
    // Only the `babel-plugin-transform-vite-meta-env` plugin is added
    plugins: [
      // used to resolve and no-op sanity's part system
      [
        'module-resolver',
        {
          root: ['.'],
          alias: {
            'part:@sanity/base/schema-creator': 'sanity-codegen/schema-creator-shim',
            'all:part:@sanity/base/schema-type': 'sanity-codegen/schema-type-shim',
            'part:@sanity/base/schema-type': 'sanity-codegen/schema-type-shim',
            '^part:.*': 'sanity-codegen/no-op',
            '^config:.*': 'sanity-codegen/no-op',
            '^all:part:.*': 'sanity-codegen/no-op',
          },
        },
      ],
      // used to resolve css module imports that are allowed in sanity projects
      'css-modules-transform',
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-numeric-separator',
      '@babel/plugin-proposal-optional-chaining',
      '@babel/plugin-proposal-nullish-coalescing-operator',
      'babel-plugin-transform-vite-meta-env', // ADDED
    ],
  },
}

export default config

Also be sure to install the babel-plugin-transform-vite-meta-env Babel plugin using yarn add or npm install.

So far, I didn't encounter any bug or issue with this approach. If I do, I'll update this comment with my problems.

Hopefully this helps a few people out there 😉

UPDATE: I actually ran into one really annoying issue. I use environment variables throughout the studio, which uses import.meta.env.* to use environment variables. Since sanity-codegen runs using Babel instead of Vite, this straight up doesn't work... To fix it, I ended up manually specifying the Babel plugins used in the sanity-codegen.config.ts. I updated the code above to reflect that.

[eltorio]

Hi, I use the same sanity-codegen.config.ts as @alexbchr 🙏 but I simply add

const schemas = [
...schemaTypes
]
export default schemas

At the end of my schemas/index.ts

[thomasblom]

@alexbchr Do you know what errors you encountered when trying the codegen in V3? I'm getting this error with the content of your sanity-codegen.config.ts.

Error: {
      "message": "(0 , _package.defineField) is not a function",
      "stack": "TypeError: (0 , _package.defineField) is not a function

It gets stuck on the define* functions of Sanity v3. This is an example of a schema:

export default defineType({
    type: 'document',
    name: 'testSchema',
    title: 'Test',
    fields: [
        defineField({
            type: 'string',
            name: 'text',
            title: 'Test',
        }),
    ],
});

[alexbchr]

@thomasblom Sorry for not being more helpful than that, but I don't exactly remember the error I was getting, although I can assure you it was not the same one as yours. When writing the answer in this thread, I do remember that we were on one of the early betas or RCs of V3 and we didn't update since then as we moved on to a separate project.

The fact that defineField is not a function is weird though... Does sanity start works for you? Is it possible that you have both sanity V2 and V3 installed locally because of a Sanity plugin or else installed?

[ricokahler]

hi all. i am alive and the upcoming 1.0 branch is the one that will support v3 (and it will only support v3). check it out now if you'd like to experiment but it's still not stable.

the current main branch will not support v3

[jomefavourite]

hi all. i am alive and the upcoming 1.0 branch is the one that will support v3 (and it will only support v3). check it out now if you'd like to experiment but it's still not stable.

the current main branch will not support v3

I got this error while using alpha, Please how do I fix this?

 Extracting schema from sanity config (this may take some time)…    Error: {
      "message": "Expected all workspaces to have a `name`",
      "stack": "Error: Expected all workspaces to have a `name`\n    at loadAndExecute
    (C:\\Users\\DELL\\Documents\\code-workspace\\ohis-portfolio\\node_modules\\@sanity-codegen\\extractor\\dist\\schema-executor.js:60:13)\n    at
    processTicksAndRejections (node:internal/process/task_queues:95:5)"
    }

[michelebruno]

@jomefavourite I fixed that by adding a name to the sanity.config.ts file, like this:

export default defineConfig({
  basePath: '/studio',
  name: 'production-workspace',
  projectId,
  dataset,
  // Add and edit the content schema in the './sanity/schema' folder
  schema,
  plugins: [
    deskTool(),
    // Vision is a tool that lets you query your content with GROQ in the studio
    // https://www.sanity.io/docs/the-vision-plugin
    visionTool({defaultApiVersion: apiVersion}),
  ],
})

[jomefavourite]

@jomefavourite I fixed that by adding a name to the sanity.config.ts file, like this:

export default defineConfig({
  basePath: '/studio',
  name: 'production-workspace',
  projectId,
  dataset,
  // Add and edit the content schema in the './sanity/schema' folder
  schema,
  plugins: [
    deskTool(),
    // Vision is a tool that lets you query your content with GROQ in the studio
    // https://www.sanity.io/docs/the-vision-plugin
    visionTool({defaultApiVersion: apiVersion}),
  ],
})

Okay, thanks