New Slice Machine Simulator blank page

Developing with Prismic
1

Hey,

Testing the new slice machine simulator, I end up with a blank page (accessing directly or from the UI) even if the config is checked OK by the Slice machine UI.

I get this error in the console when accessing directly:
next-dev.js?3515:32 Error: Receiver is currently not embedded as an iframe at SimulatorAPI.ready (index.js?390f:327:1) at StateManager.initAPI (index.js?0aee:181:1) at StateManager.load (index.js?0aee:145:1)

No error shown when accessing from the UI.

Framework: Next.js. All required packages were updated to latest versions.

1 Like
2

Hi Gabriel,

Welcome to the community!

With Slice Simulator you don't go to the /slice-simulator route you need to navigate to a Slice in the Slice Machine UI and click the "Simulate Slice" button.

Let me know if you have any further questions.

Thanks.

4

Hey Phil,

Thank you for your reply.

Yes, I saw that afterwards, which is unfortunate for us.

Still I keep getting a blank page if I "Simulate Slice" from the UI.

1 Like
5

Can you show me your package.json and your slice-simulator files?

Thanks.

6

Please find it below:

package.json

"dependencies": {
    "@prismicio/client": "5.1.1",
    "aos": "^2.3.4",
    "axios": "^0.24.0",
    "beautiful-react-hooks": "^1.0.2",
    "js-cookie": "^3.0.1",
    "jsforce": "^1.10.1",
    "lodash": "^4.17.21",
    "lottie-web": "^5.7.12",
    "multer": "^1.4.3",
    "next": "12.0.7",
    "next-compose-plugins": "^2.2.1",
    "next-connect": "^0.11.0",
    "next-images": "^1.8.1",
    "next-optimized-images": "^2.6.2",
    "next-slicezone": "^0.2.0",
    "next-transpile-modules": "^8.0.0",
    "prettier": "^2.4.1",
    "prismic-javascript": "^3.0.2",
    "prismic-reactjs": "^1.3.4",
    "qs": "^6.10.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-slick": "^0.28.1",
    "react-stickynode": "^4.0.0",
    "sass": "^1.35.2",
    "scrollmonitor": "^1.2.4",
    "slick-carousel": "^1.8.1",
    "slugify": "^1.6.0",
    "webp-loader": "^0.6.0"
  },
  "devDependencies": {
    "@prismicio/slice-simulator-react": "^0.1.2",
    "@storybook/react": "6.3.12",
    "eslint": "7.32.0",
    "eslint-config-next": "12.0.7",
    "eslint-config-prettier": "8.3.0",
    "shx": "0.3.3",
    "slice-machine-ui": "^0.2.0",
    "sm-commons": "0.0.23",
    "webpack-bundle-analyzer": "4.5.0"
  }

slice-simulator.jsx

import { SliceSimulator } from "@prismicio/slice-simulator-react";
import SliceZone from "next-slicezone";

import state from "../.slicemachine/libraries-state.json";

import * as Slices from "../slices";
const resolver = ({ sliceName }) => Slices[sliceName];

const SliceSimulatorPage = () => (<SliceSimulator
	// The `sliceZone` prop should be a function receiving slices and rendering them using your `SliceZone` component.
	sliceZone={(props) => <SliceZone {...props} resolver={resolver} />}
	state={state}
/>);

export default SliceSimulatorPage;
7

I've just updated and am having the same issue. Seems to be a problem with the Slice resolver. I haven't dug too deep into it due to Storybook being better for us right now but it looks like an easy-ish fix.

Will report back if no one comes with a solution in the meantime.

8

Hi Vitor,

Since you think it might be related to the resolver, can you tell me the name of the folder of your Slice Library?

Thanks.

9

Hey Phil :wave:

I have two actually, one called slices for all and one recently created BlogSlices. Still haven't looked into the issue though.

10

I'm going to pass your info to the team, in the meantime can you send me your project in a zip or link to your github?

Thanks.

11

Hey Phil, coming back to this for a sec. I found out what was happening on my side, I have two local slice libraries and the original code of /pages/slice-simulator.tsx only considers one single library called Slices. So when I tried to preview slices of this other library the resolver wouldn't find it because they weren't even being imported.

12

Ah ok, that makes a lot of sense. In that case, if you want to import a second library (let's call it comps), you can do so like below.

import * as Slices from "../slices"; 
import * as Comps from "../comps"; 
const AllSlices = { ...Slices, ...Comps }; 
const resolver = ({ sliceName }) => AllSlices[sliceName];

Or

import * as Slices from "../slices";
import * as Comps from "../comps";
const resolver = ({ sliceName }) => Slices[sliceName] || Comps[sliceName];

I'll add this extra info to the docs.

1 Like