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 Textfields; - 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
.jsonfiles and the other fields have a different structure that matches the if clause on the code above, but theKey Textfield 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.
I think the issue here for everyone is not that the mock data is being generated incorrectly, the issue, in my opinion, is that the recommended code snippet for Key Text recommends the PrismicText component and this causes an error.
Key text should just be {slice.field}. But in the “Widget” Slice Machine tells you to use <PrismicText field={slice.field} /> , but <PrismicText /> doesn't want just a string.
So the correct way to use a ket text is...
const HeroHeader = ({ slice }) => {
return <p>{slice.primary.text}</p>
}
This has been updated in the latest versions of Slice Machine, add should appear in the code snippets like so:
<span >{ slice.primary.text }</span>
2 Likes
For those running into this issue much further down the line -- make sure to distinguish where you're using {slice.primary.field[0].text} vs {slice.primary.field}.
If you're not consistent about how you access exact values - and where you render them - you can wind up unintentionally trying to unpack content too early, or too deep.
I ran into this issue while unpacking the literal text and then accidentally rendering the literal as a field on RichText, when I meant to utilize the JSON structure provided by RichText, THEN render. Small distinction, but hopefully it saves some headaches for others.
1 Like