Preview & Toolbar do not work

Developing with Prismic
1

Hi there,
I am having difficulties with the preview and the toolbar on react.
When I open the preview (localhost) the toolbar does not show.

In my root I have the following:

import { PrismicProvider, PrismicToolbar } from '@prismicio/react'
import { prismicClient, prismicRepository } from './api/prismic'
import { TestWrapper } from './components/prismic/testWrapper' 

return (
    <PrismicProvider client={prismicClient}>
      <p>Test</p>
      <TestWrapper />
      <PrismicToolbar repositoryName={prismicRepository} />
    </PrismicProvider>
  )

The prismic Client and prismicRepository look like this:

import * as prismic from '@prismicio/client'

// Fill in your repository name
export const prismicRepository = 'my-repo'
const endpoint = prismic.getEndpoint(prismicRepository)

export const prismicClient = prismic.createClient(endpoint, {
  // If your repo is private, add an access token
  accessToken: 'my-token', 
})

And the TestWrapper is nothing more than:

import React from 'react'
import { PrismicRichText, useSinglePrismicDocument } from '@prismicio/react'

export const TestWrapper = () => {
  const [document] = useSinglePrismicDocument('news')
  console.log('Doc: ', document)

  return (
    <>
      {document && (
        <PrismicRichText field={document.data.example_rich_text} />
      )}
    </>
  )
}

The good thing is: I do not get any errors,
The bad thing is: document stays undefined and the toolbar stays on 'display: none !important;'

Did I overlook something here? Or should it indeed work like this?

3

Hello @bartjan.vanhummel

Have you configured previews in your repo? Also, can you please try to clear cookies and see if that works?

Thanks,
Priyanka

4

Hi Priyanka,

Clearing the cookies did not help.
The Previews have been configured in the repo under .prismic.io/settings/previews/

5

Hello @bartjan.vanhummel

I need your project source code and repository URL to investigate it further. You can share a Github repo or a Zip file in a private message.

Thanks,
Priyanka

7

Hello @bartjan.vanhummel

I have checked your repository and found that you haven't set /preview for the preview route. Could you please set this configuration in Link Resolver in your repository and check if it works? Find more detail about What's happening in /preview?

Thanks,
Priyanka

8

hi,

I added /preview and in the project /preview will be redirected to /
However I am still not able to see the toolbar or the preview itself.

9

Hello,

It's difficult for me to troubleshoot without access to the code. You might want to check our Previews troubleshoot guide.

I have one question:
Have you set up routes or link resolver in your prismic client as described in this section? I don't see this setup.

Thanks,
Priyanka

10

Yes I had that, but did not do much.
I added /preview in there and /news to be sure that it should work.
Today I didn't work with it.

For now I added a 'news channel' especially for development and testing.
In the code I prevent this channel to be shown on production.

It's not that I do not get the data. It's just that preview in combination with showing the data is not working. I will have a look later on again.

11

Yes, please look at our troubleshooting guide and let me know if you need anything else.