Live Preview error in Next.js

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.

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;

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

This was both local and on our test environment.

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.

@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

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.


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?

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:

Hey Yoann,

The preview on your repo is working on my side.

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.

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

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?

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

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?

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.