Unhandled Runtime Error

Hello!
I followed the What Is Content Modeling? - Documentation - 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",
1 Like

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"
  }
}

Error

Slice

Usage

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.

4 Likes

I report that I am also experiencing this error. Screenshot attached.

Could this bug be a high priority to fix? This bug means unfortunately that the slice simulator cannot be used at all, nor can screenshots be generated or pushed to Prismic as a result.

And is there a temporary measure I can take that will allow me to bypass the error?

My package.json:

"slice-machine-ui": "^0.3.8"
"@prismicio/slice-simulator-react": "^0.2.2"
"@prismicio/client": "^6.4.2"
"@prismicio/next": "^0.1.2"
"@prismicio/react": "^2.3.0"

Hi Chris,

Can you show me how you are templating this field in your Slice?

Hello @chris5

Thanks for raising the issue.

My colleague Paulina has already created an issue in our issue tracker. We haven't received any update from the team. I will send a reminder to my team now.

Does this solution/workaround not work for you?

Thanks,
Priyanka

Thank you for the reply.

Unfortunately I experience this error whichever slice I try to render in the slice simulator. I've tried altering the mock data in the way described, but it hasn't cleared the error unfortunately.

Thank you for the reply.

I experience this error regardless as to which slice I try to render in the slice preview, and the error is still present when I comment out everything in the slice template file and simply return <p>TEST</p>.

e.g.

const HeroHeader = ({ slice }) => {
  return <p>TEST</p>
}

Happy to provide access to the GitHub repository if it would help.