Error with Live Preview in Next.js and Sanity.io resolved by fixing parts in sanity.json
21 replies
Last updated: Mar 14, 2022
N
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: Console:
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
in
Failed to load defined templates, falling back to defaults:
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)
"eslint.workingDirectories": ["./web", "./studio"]
/.vscode/settings.jsonand node_modules has been replaced already. Any ideas how I can track this down?
Mar 14, 2022, 12:46 PM
N
// 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
N
Page schema is
Mar 14, 2022, 6:45 PM
N
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
resolveProductionUrland your
deskStructure?
Mar 14, 2022, 7:02 PM
N
Sure
Mar 14, 2022, 7:04 PM
N
{ "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
N
// ./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
N
I do not have a deskStructure … would that be the issue?
Mar 14, 2022, 7:07 PM
N
Installing plugin and adding it now, BRB
user M
Mar 14, 2022, 7:10 PM
N
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
N
New sanity.js looks like this now…
Mar 14, 2022, 7:12 PM
N
{ "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
N
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
N
Ah!
Mar 14, 2022, 8:41 PM
N
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
N
That did it! Learning something new every day. Have an awesome week
user M
!Mar 14, 2022, 8:50 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.