type error in previews due to missing `seo` data, but SEO metabox has a default title set

[chris montgomery]

On a freshly-provisioned local environment, I went to view the preview of the draft-status "Privacy Policy" page, but the preview failed in the client. This also happens when previewing any other page.

That's a surprise especially since the Yoast SEO fields show a default title template:

nextjs-wordpress:dev: error - components/Article.tsx (55:19) @ seo
nextjs-wordpress:dev: error - TypeError: Cannot read properties of null (reading 'seo')
nextjs-wordpress:dev:     at Article (webpack-internal:///./components/Article.tsx:62:43)
nextjs-wordpress:dev:     at renderWithHooks (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
nextjs-wordpress:dev:     at renderIndeterminateComponent (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderNode (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
nextjs-wordpress:dev:     at renderHostElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderNode (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
nextjs-wordpress:dev:     at renderChildrenArray (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderNode (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
nextjs-wordpress:dev:     at renderHostElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderForwardRef (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderForwardRef (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderIndeterminateComponent (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderIndeterminateComponent (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderContextProvider (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderIndeterminateComponent (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderContextProvider (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderContextConsumer (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5906:3)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6023:11) {
nextjs-wordpress:dev:   page: '/preview'
nextjs-wordpress:dev: }
nextjs-wordpress:dev:   53 |       <Head>
nextjs-wordpress:dev:   54 |         <title>
nextjs-wordpress:dev: > 55 |           {content.seo.title ? parse(content.seo.title) : `Next.js WordPress`}
nextjs-wordpress:dev:      |                   ^
nextjs-wordpress:dev:   56 |         </title>
nextjs-wordpress:dev:   57 |         {content.seo.metaDesc ? parse(content.seo.metaDesc) : null}
nextjs-wordpress:dev:   58 |         {content.seo.fullHead ? parse(content.seo.fullHead) : null}

[chris montgomery]

It looks like the post status might change which part of the content.seo.title object path causes the type failure, but I'm not entirely sure if this is a coincidence.

In the error above (draft page):

Cannot read properties of null (reading 'seo')

In a slightly different error on a newly-published page:

TypeError: Cannot read properties of undefined (reading 'title')

Full error output for published page

nextjs-wordpress:dev: error - components/Article.tsx (55:23) @ title
nextjs-wordpress:dev: error - TypeError: Cannot read properties of undefined (reading 'title')
nextjs-wordpress:dev:     at Article (webpack-internal:///./components/Article.tsx:62:47)
nextjs-wordpress:dev:     at renderWithHooks (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
nextjs-wordpress:dev:     at renderIndeterminateComponent (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderNode (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
nextjs-wordpress:dev:     at renderHostElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderNode (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
nextjs-wordpress:dev:     at renderChildrenArray (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderNode (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
nextjs-wordpress:dev:     at renderHostElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderForwardRef (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderForwardRef (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderIndeterminateComponent (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderIndeterminateComponent (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderContextProvider (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderIndeterminateComponent (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderContextProvider (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5920:3)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6017:11)
nextjs-wordpress:dev:     at renderNodeDestructiveImpl (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
nextjs-wordpress:dev:     at renderNodeDestructive (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
nextjs-wordpress:dev:     at renderContextConsumer (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5906:3)
nextjs-wordpress:dev:     at renderElement (/Users/cdom/Developer/work/forks/gregrickaby/nextjs-wordpress/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6023:11) {
nextjs-wordpress:dev:   page: '/preview'
nextjs-wordpress:dev: }
nextjs-wordpress:dev:   53 |       <Head>
nextjs-wordpress:dev:   54 |         <title>
nextjs-wordpress:dev: > 55 |           {content.seo.title ? parse(content.seo.title) : `Next.js WordPress`}
nextjs-wordpress:dev:      |                       ^
nextjs-wordpress:dev:   56 |         </title>
nextjs-wordpress:dev:   57 |         {content.seo.metaDesc ? parse(content.seo.metaDesc) : null}
nextjs-wordpress:dev:   58 |         {content.seo.fullHead ? parse(content.seo.fullHead) : null}

[chris montgomery]

👍