🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Error with Live Preview in Next.js and Sanity.io resolved by fixing parts in sanity.json

21 replies
Last updated: Mar 14, 2022
Howdy everyone! When going through the Live Preview with Next.js and Sanity.io: A Complete Guide I am getting an unhandled error in the browser at 3333 despite a successful build. What’s odd is that this was working until reaching the section Setting up the Production Preview . Devtools:
Failed to load defined templates, falling back to defaults:
Console:
TypeError: schema.getTypeNames is not a function
    at Object.defaults (/static/js/app.bundle.js:103002:17)
    at getDefaultTemplates (/static/js/app.bundle.js:179904:44)
    at getTemplates (/static/js/app.bundle.js:179926:12)
    at Object.defaultInitialValueTemplateItems (/static/js/app.bundle.js:108729:59)
    at getNewDocumentOptions (/static/js/app.bundle.js:208056:93)
    at /static/js/app.bundle.js:208028:14
    at Object. (/static/js/app.bundle.js:289588:62)
    at __webpack_require__ (/static/js/vendor.bundle.js:713:30)
    at fn (/static/js/vendor.bundle.js:118:20)
    at Object. (/static/js/app.bundle.js:289528:29)
My schema is identical to the example. The /web front end builds perfectly, correctly pulling content from Sanity. There are no ESLint errors thanks to the
"eslint.workingDirectories": ["./web", "./studio"]
in
/.vscode/settings.json
and node_modules has been replaced already. Any ideas how I can track this down?
Mar 14, 2022, 12:46 PM
// First, we must import the schema creator
import createSchema from 'part:@sanity/base/schema-creator';

// Then import schema types from any plugins that might expose them
import schemaTypes from 'all:part:@sanity/base/schema-type';

// Custom schemas
import page from './page';

// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
  // We name our schema
  name: 'default',
  // Then proceed to concatenate our document type
  // to the ones provided by any plugins that are installed
  types: schemaTypes.concat([page]),
});
Mar 14, 2022, 6:45 PM
Page schema is
Mar 14, 2022, 6:45 PM
export default {
  name: 'page',
  title: 'page',
  type: 'document',
  fields: [
    { name: 'title', type: 'string' },
    { name: 'slug', type: 'slug', options: { source: 'title' } },
    { name: 'content', type: 'text' },
  ],
};
Mar 14, 2022, 6:46 PM
That looks fine! Can you also share you
sanity.json
, your
resolveProductionUrl
and your
deskStructure
?
Mar 14, 2022, 7:02 PM
Sure
Mar 14, 2022, 7:04 PM
{
  "root": true,
  "project": {
    "name": "Gravyboat"
  },
  "api": {
    "projectId": "a0cf01go",
    "dataset": "production"
  },
  "plugins": [
    "@sanity/base",
    "@sanity/default-layout",
    "@sanity/default-login",
    "@sanity/desk-tool",
    "@sanity/production-preview"
  ],
  "env": {
    "development": {
      "plugins": ["@sanity/vision"]
    }
  },
  "parts": [
    {
      "name": "part:@sanity/base/schema",
      "implements": "part:@sanity/production-preview/resolve-production-url",
      "path": "./resolve-production-url.js"
    }
  ]
}
Mar 14, 2022, 7:05 PM
// ./studio/resolveProductionUrl.js

// Any random string, must match SANITY_PREVIEW_SECRET in the Next.js .env.local file
const previewSecret = '32o98jcawoniunf3q9048jsladknfgnhd09u4';

// Replace `remoteUrl` with your deployed Next.js site
const remoteUrl = `<https://gravyboat-dev.vercel.app/>`;
const localUrl = `<http://localhost:3000>`;

export default function resolveProductionUrl(doc) {
  const baseUrl = window.location.hostname === 'localhost' ? localUrl : remoteUrl;

  const previewUrl = new URL(baseUrl);

  previewUrl.pathname = `/api/preview`;
  previewUrl.searchParams.append(`secret`, previewSecret);
  previewUrl.searchParams.append(`slug`, doc?.slug?.current ?? `/`);

  return previewUrl.toString();
}
Mar 14, 2022, 7:06 PM
I do not have a deskStructure … would that be the issue?
Mar 14, 2022, 7:07 PM
Installing plugin and adding it now, BRB
user M
Mar 14, 2022, 7:10 PM
Failed to compile.

Error in ./node_modules/@sanity/base/lib/datastores/document/document-pair/validation.js
Module not found: Error: Can't resolve 'part:@sanity/base/schema' in '/Users/baller/Documents/GitHub/gravyboat-dev/studio/node_modules/@sanity/base/lib/datastores/document/document-pair'
Mar 14, 2022, 7:11 PM
New sanity.js looks like this now…
Mar 14, 2022, 7:12 PM
{
  "root": true,
  "project": {
    "name": "Gravyboat"
  },
  "api": {
    "projectId": "a0cf01go",
    "dataset": "production"
  },
  "plugins": [
    "@sanity/base",
    "@sanity/default-layout",
    "@sanity/default-login",
    "@sanity/desk-tool",
    "@sanity/production-preview",
    "iframe-pane"
  ],
  "env": {
    "development": {
      "plugins": [
        "@sanity/vision"
      ]
    }
  },
  "parts": [
    {
      "name": "part:@sanity/base/schema",
      "implements": "part:@sanity/production-preview/resolve-production-url",
      "path": "./resolve-production-url.js"
    },
    {
      "name": "part:@sanity/desk-tool/structure",
      "path": "./deskStructure.js"
    }
  ]
}
Mar 14, 2022, 7:12 PM
Would it be easier/faster if I share a repo with you
user M
?
Mar 14, 2022, 7:20 PM
Got it! The issue is with your parts in your
sanity.json
. You've combined your parts for resolving your production url and your schema. They need to be two distinct parts, fpr example:
"parts": [
    {
      "name": "part:@sanity/base/schema",
      "path": "./schemas/schema"
    },
    {
      "name": "part:@sanity/desk-tool/structure",
      "path": "./src/desk/deskStructure.js"
    },
    {
      "implements": "part:@sanity/production-preview/resolve-production-url",
      "path": "./src/resolveProductionUrl.js"
    },
  ]
Mar 14, 2022, 7:58 PM
Got it! The issue is with your parts in your
sanity.json
. You've combined your parts for resolving your production url and your schema. They need to be two distinct parts:
"parts": [
    {
      "name": "part:@sanity/base/schema",
      "path": "./schemas/schema"
    },
    {
      "name": "part:@sanity/desk-tool/structure",
      "path": "./src/desk/deskStructure.js"
    },
    {
      "name": "part:@sanity/base/new-document-structure",
      "path": "./src/newDocumentStructure.js"
    },
    {
      "implements": "part:@sanity/base/document-actions/resolver",
      "path": "./src/resolveDocumentActions.js"
    },
    {
      "implements": "part:@sanity/form-builder/input/image/asset-sources",
      "path": "./src/assetSources.js"
    },
    {
      "implements": "part:@sanity/form-builder/input/file/asset-sources",
      "path": "./src/assetSources.js"
    },
    {
      "implements": "part:@sanity/production-preview/resolve-production-url",
      "path": "./src/resolveProductionUrl.js"
    },
    {
      "implements": "part:@sanity/base/theme/variables/override-style",
      "path": "./src/variableOverrides.css"
    }
  ]

Mar 14, 2022, 7:58 PM
Note that the paths to the files is different in mine. You'd need to replace it with whatever yours is.
Mar 14, 2022, 7:59 PM
Ah!
Mar 14, 2022, 8:41 PM
You’re amazing
user M
as is your entire team. I will be selling Sanity hard to begin the process of freeing the internet from the blight of Wordpress…
Mar 14, 2022, 8:42 PM
Haha, so happy to help, Neil!
Mar 14, 2022, 8:45 PM
That did it! Learning something new every day. Have an awesome week
user M
!
Mar 14, 2022, 8:50 PM
You too!
Mar 14, 2022, 9:09 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?