Unknown type: svgUploadPreview. Valid types are: page, goal, array...

4 replies

Last updated: Oct 19, 2020

Hi all!I’m trying to install an svg inline field on Sanity Studio with

sanity-plugin-inline-svg

(https://npm.io/package/sanity-plugin-inline-svg ) but I’m getting this error :

goal documentfields<unnamed_type_@_index_0> svgUploadPreview
ERROR
Unknown type: svgUploadPreview. Valid types are: page, goal, array, block, boolean, datetime, date, document, email, file, geopoint, image, number, object, reference, slug, string, telephone, text and url

I did implement it like this in

schemas/goal.js

import { GiArcheryTarget as icon } from 'react-icons/gi';
import svgUploadPreview from 'sanity-plugin-inline-svg';

export default {
  name: 'goal',
  title: 'Objectifs',
  type: 'document',
  icon,
  fields: [
    {
      name: 'svgUpload',
      title: 'Icône',
      type: 'svgUploadPreview',
    },
    {
      name: 'title',
      title: 'Titre',
      type: 'string',
    },
    {
      name: 'list',
      title: 'Liste de capacités',
      type: 'array',
      of: [{ type: 'string' }],
    },
  ],
};

schemas/schema.js

file is like this :

import createSchema from 'part:@sanity/base/schema-creator';
import schemaTypes from 'all:part:@sanity/base/schema-type';

import page from './page';
import goal from './goal';

export default createSchema({
  name: 'default',
  types: schemaTypes.concat([page, goal]),
});

Before that, I did a

sanity install sanity-plugin-inline-svg

in my sanity folder and restart it after that.

I don’t understant what I did wrong. Thanks for any help on this
🙂

AI Update

The issue you're experiencing is that you're trying to use an old plugin designed for Sanity Studio v2, but the error and your code structure suggest you're working with a modern version of Sanity. The plugin you mentioned (sanity-plugin-inline-svg) and the type name svgUploadPreview are from an outdated plugin that's no longer compatible.

The good news is there's a modern, actively maintained version of this plugin for Sanity Studio v3!

Solution: Use the Modern Plugin

You need to use @focus-reactive/sanity-plugin-inline-svg-input instead. Here's how to fix your setup:

1. Uninstall the old plugin and install the new one

# Remove the old plugin
sanity uninstall sanity-plugin-inline-svg

# Install the modern plugin
npm install @focus-reactive/sanity-plugin-inline-svg-input

2. Update your `sanity.config.js` (or `.ts`)

Add the plugin to your Sanity configuration:

import { defineConfig } from 'sanity'
import { inlineSvgInput } from '@focus-reactive/sanity-plugin-inline-svg-input'

export default defineConfig({
  // ... your other config
  plugins: [
    inlineSvgInput(),
    // ... your other plugins
  ],
})

3. Update your schema (`schemas/goal.js`)

Change the field type from svgUploadPreview to inlineSvg:

import { GiArcheryTarget as icon } from 'react-icons/gi';

export default {
  name: 'goal',
  title: 'Objectifs',
  type: 'document',
  icon,
  fields: [
    {
      name: 'svgUpload',
      title: 'Icône',
      type: 'inlineSvg',  // Changed from 'svgUploadPreview'
    },
    {
      name: 'title',
      title: 'Titre',
      type: 'string',
    },
    {
      name: 'list',
      title: 'Liste de capacités',
      type: 'array',
      of: [{ type: 'string' }],
    },
  ],
};

4. Remove the import line

You no longer need to import anything in your schema file - the plugin registers the type globally when added to your config. Remove this line from your goal.js:

import svgUploadPreview from 'sanity-plugin-inline-svg'; // Remove this

Why This Happened

The old sanity-plugin-inline-svg plugin (which used the svgUploadPreview type) was built for Sanity Studio v2. Your code structure using part:@sanity/base/schema-creator confirms you were following v2 patterns, but if you're on a newer Sanity version, you need the v3-compatible plugin.

The modern plugin uses the type name inlineSvg instead of svgUploadPreview, and it's installed and configured differently to work with Sanity Studio v3's architecture.

Bonus: Preview in Arrays

If you want to display SVG previews in array fields, the new plugin includes a handy component called InlineSvgPreviewItem. Check out the GitHub documentation for examples on how to use it for rich array previews with your SVG icons.

After making these changes, restart your Sanity Studio and you should be good to go! 🎉

According to the README, you must import into your schema.js file:

import svgUploadPreview from 'sanity-plugin-inline-svg';

(and I believe it implicitly asks you to also make

svgUploadPreview

part of your schema types)

Ah ok ! thanks a lot Erlend ! it works !I did it like this in my

schema.js

file indeed :

import createSchema from 'part:@sanity/base/schema-creator';
import schemaTypes from 'all:part:@sanity/base/schema-type';
import svgUploadPreview from 'sanity-plugin-inline-svg';

import page from './page';
import goal from './goal';

export default createSchema({
  name: 'default',
  types: schemaTypes.concat([page, goal, svgUploadPreview]),
});

great 😄

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.

Get started for free Explore the demo