Live Preview error in Next.js

Developing with Prismic
,
1

Following the tutorial for the live preview alpha for Next.js, I'm getting errors without any follow up messaging whenever I add a slice simulator page url.

image
image309×1191 16.4 KB

slicemachine.config.json

{
	...
	"adapter": "@slicemachine/adapter-next",
	"libraries": ["./slices"],
	"localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
}

pages/slice-simulator.js

import { SliceSimulator } from '@slicemachine/adapter-next/simulator';
import { SliceZone } from '@prismicio/react';

import { components } from '../slices';

const SliceSimulatorPage = () => {
	return <SliceSimulator sliceZone={(props) => <SliceZone {...props} components={components} />} />;
};

export default SliceSimulatorPage;
2

Thanks for the feedback @ianboyte. We'll send this information to the education team

5

This was both local and on our test environment.

7

Hi @ianboyte ,

I'll be happy to help debug this with you.

Can you provide us with more information on the error you're seeing?
Are you seeing any errors in the console of your browser or in your terminal?
Are you running a Prismic content preview in your browser at the same time?

Any other info will be useful.

Thanks.

8

@ianboyte dis you resolve it? I have the same issue. simulator is wording if we go to see one slice from the slicemachine, but from the prismic document every slice is in error as in your screeshot

10

Hi Yohan,

Thank you for sending your project privately. I see you're on the latest Slice Machine and everything seems to be configured properly.

Are you seeing any errors in the console of your browser or your terminal?
Are you running a Prismic content preview in your browser at the same time?

Thanks.

11

console error on prismic page builder on iframe
console error on prismic page builder on iframe1551×919 84 KB

console error on prismic page builder
console error on prismic page builder1407×855 61.6 KB

Thank you @Phil, I tried with and without preview opened, error with both.
I attach 2 screenshot from the console: it seems there is a config missing, and in the iframe errors seems to show that the repositoryName is missing / not found. But as you can see it the repo I sent you, we have our repo name in the slicemachine.config.json. Is there somewhere else we should put it too, or something missing in the config to use this variable?

12

Hi @Phil, I changed the format of the call to repositoryName, and I don't have the errors in the console anymore... but live preview of slices in page builder still not working :frowning:

prismic repositoryName format change
prismic repositoryName format change1245×250 13.5 KB

14

Hey Yoann,

The preview on your repo is working on my side.

Screenshot 2023-10-13 at 12.36.57
Screenshot 2023-10-13 at 12.36.571462×937 95.6 KB

Make sure the localSliceSimulatorURL:

{
  "repositoryName": "wesharebonds-website",
  "adapter": "@slicemachine/adapter-next",
  "libraries": [
    "./src/slices"
  ],
  "localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
}

Matches the live preview URL that you're passing to the editor:
Screenshot 2023-10-13 at 12.41.13

AND if you're using the localhost, make sure the local server running on port 3000

Thanks.

15

Hi @Phil, thank you very much for your help!!
Indeed I configured slice simulator URL within the UI at the beginning of my discovery of slice machine. At the end I checked the code several times, but never thought about the "Live preview setting" within the new page builder (your last screenshot).
Awesome it's wordking now :pray:

1 Like
23

I'm running into a similar issue. When the Live Preview live editing link it set to : http://localhost:3000/slice-simulator the thumbnails work as intended. If I update this to the deployed site URL I get the errors. I have troubledshooted this a few ways without success. Any suggestions?

24

Hi @matt8 , could you please send me a DM with the name of your repo and the URL you are using and I'll take a look?

Best,
Guy

25

Hi, I'm having a very similar error, however the Live Preview doesn't function with http://localhost:3000/slice-simulator or the deployed site URL.

{
  "repositoryName": "example",
  "adapter": {
    "resolve": "@slicemachine/adapter-next",
    "options": {
      "lazyLoadSlices": true
    }
  },
  "libraries": ["./src/slices"],
  "localSliceSimulatorURL": "https://example.com/slice-simulator"
}

Is this config correct or am I missing smth?

26

Hi Daniel,

Welcome to the community :slight_smile:

Can you record your issue with this Chrome plugin? It will give us the dev information needed to debug, and you can remove it once you’re done.

Thanks.