Discussion about resolving a type error in a Next.js app using Sanity Template.

So I am following the Sanity Template Next.js App Dir personal website template... And these lines when pasted into my Next.js app give me the error in the screenshot saying that

'PreviewPane' refers to a value, but is being used as a type here. Did you mean 'typeof PreviewPane'?

. However, if I change that line to be

[S.view.component(PreviewPane).title('Preview')]

the type errors go away. So would it be better to just import

previewSecretId

and

apiVersion

directly into

PreviewPane

vs passing them as props?

Hi -- a possible first question, I think, is if you have this Structure Builder code in a .tsx file, not just a .ts one?
And presuming you've imported that PreviewPane component as in the original example?

Yea

PreviewPane

is a

.tsx

file. In terms of importing, I switched

PreviewPane

to be the default export, so my import is

import PreviewPane from './previewPane/PreviewPane'

. However, that shouldn't cause any issues. I mean it works when you just do

.document(PreviewPane)

instead of trying to do

.document(props => <PreviewPane {...props} />

. It already has access to the document when looking at this documentation , so the only reason to do what is currently being done is to get the preview secret and apiVersion which is just being imported from

lib/sanity.api

. That import could just be moved over to

PreviewPane.tsx

instead

it's your structure builder file I'm asking about, where you use PreviewPane -- and get the error,..

Oooohhh 😅 oops I had

settings.ts

vs

settings.tsx

😅

right - was what looked for. Does changing fix it? The hint was that 'type inference' worked when you locally defined it as a function. But for JSX which is how you're using it, TS needs to know that via the file extension :)

I would also award the error message as top class in confusing, ill meaning, etc.,. --- it's awful, even if a type-centered person might consider they understand it

Yeah that got rid of the error. I still think it’s “cleaner” to not pass those two items as props and instead just import them in the preview pane file but that’s just me 🤷‍♂️

all that's up to you -- as long as it works :)

Yeah I guess I was also thinking in terms of that being a template

Enjoy, then -- take care 🌴 🌴