Unhandled Runtime Error

I followed the Model Content with Next.js - Prismic docs but I can't run a slice preview.

I get a TypeError: Cannot use 'in' operator to search for 'text' in e

These are the versions I'm currently using:

"@prismicio/client": "^6.4.2",
"@prismicio/helpers": "^2.2.1",
"@prismicio/next": "^0.1.1",
"@prismicio/react": "^2.2.0",
"@prismicio/slice-simulator-react": "^0.2.1",
"slice-machine-ui": "^0.3.4",

Hello @victor2, have you followed the steps that the UI indicated to configure the Slice simulator?

Yes, I did. It is supposed to be alright. It opens the window with the slice-simulator route, but it gives the mentioned error.
Is using Typescript a problem? My slice-simulator route is a .tsx file.

There shouldn’t be a problem with having a .tsx file instead. Did you change the code for the slice-simulator file? the one provided by the Slice Machine UI.

If you mean the auto-generated file for the slice component, yes, I did edit that.

I may be wrong here, but it seems that when you create a Key Text field on a slice, the data generated inside mocks.json and libraries-state.json is like "some_label": "some auto generated text" but the code actually expects another structure, something like:

"some_label": [
          "type": "heading1",
          "text":  "some auto generated text",
          "spans": []

I see. Could you help us by detailing all the steps you followed until you found this error? This will help us replicate the use case.

I basically did:

  • Created a new slice with Key Text fields;
  • When trying to preview the slice with slice-simulator I get the error: TypeError: Cannot use 'in' operator to search for 'text' in e;
  • Checking the console for errors I got an error on index.js?22c8:113:1;
  • The error is on this part of the code
const asText = (richTextField, separator = " ") => {
  let result = "";
  for (let i = 0; i < richTextField.length; i++) {
    if ("text" in richTextField[i]) {
      result += (result ? separator : "") + richTextField[i].text;
  return result;
  • I checked the .json files and the other fields have a different structure that matches the if clause on the code above, but the Key Text field does not.

Hopefully this helps you. If you need more information, just let me know.

What IDs are you giving to the Key text fields?
I'm using a project with the same setup and dependency versions as you but can't reproduce the use case.

Try using text as an id.

I tried it with different IDs, doesn't seem to cause an issue. Can you show us a screenshot of the error on the screen?

I have the same problem. Brand new project and following a tutorial.

It works just fine if i comment out the buttonText field in the component.

What information would you need to test this error?

My package.json looks like this

  "name": "apptech-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "start-slicemachine"
  "dependencies": {
    "@prismicio/client": "^6.4.3",
    "@prismicio/helpers": "^2.3.0",
    "@prismicio/next": "^0.1.2",
    "@prismicio/react": "^2.3.0",
    "@prismicio/slice-simulator-react": "^0.2.2",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0"
  "devDependencies": {
    "eslint": "8.15.0",
    "eslint-config-next": "12.1.6",
    "slice-machine-ui": "^0.3.7"




So the SliceMachine actually creates mock data that causes this error.

Autogenerated mock for Key Text

"buttonText": "test",

Manually corrected mock that works for Key Text

      "buttonText": [
          "text": "test"
1 Like

Just wanted to bump this. What causes the slicemachine to make this error? Is this an actual error or are my dependencies misaligned?

@Pau do you have any idea or know anyone that might?

Hello @nicklas.oest, we've agreed that this is a bug, and I've logged it in the backlog. We'll update this same thread when we have any news about it.

Thanks for sharing your use case.