✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

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?