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

10 replies
Last updated: Jun 14, 2023
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
the type errors go away. So would it be better to just import
directly into
vs passing them as props?
Jun 14, 2023, 3:39 PM
user P
-- 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?
Jun 14, 2023, 4:46 PM
is a
file. In terms of importing, I switched
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
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
. That import could just be moved over to
Jun 14, 2023, 4:50 PM
it's your structure builder file I'm asking about, where you use PreviewPane -- and get the error,..
Jun 14, 2023, 4:53 PM
Oooohhh 😅 oops I had
Jun 14, 2023, 4:55 PM
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 :)
Jun 14, 2023, 4:56 PM
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
Jun 14, 2023, 4:57 PM
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 🤷‍♂️
Jun 14, 2023, 4:58 PM
all that's up to you -- as long as it works :)
Jun 14, 2023, 4:58 PM
Yeah I guess I was also thinking in terms of that being a template
Jun 14, 2023, 4:59 PM
Enjoy, then -- take care 🌴 🌴
Jun 14, 2023, 5:03 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the 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?

Categorized in