Error when review changes visually

[yvonnegruber]

Hello everybody,

we have been successfully using the story.to.design plugin to synchronize our components with Figma.

Unfortunately, we always have an error with Review and Update.
The error occurs when we click the "Review and update" button in the "Review changes visually" section below and says "There was an error when comparing variants. You can update anyway or contact the support"

What could be the reason for this?

Best wishes
Yvonne

---

Bug report identity: Please do not edit

Task path: IhFdg3uP1Q1GAshjQMuZ/8KqZjFXVP2vB3XJETxP6/1yv1j6v1rzvkqd

[muryoh]

Hi @yvonnegruber,

Unfortunately I am not able to use your report (maybe a technical hiccup occurred there?). I tried reproducing on my end with a component having many variants but have not been successful so far.

I have a few questions that would help investigating this further:

• except for the review part, actually updating the component does work?
• does this also happen on components with less variants?
• when this happens, could you please have a look at the console to check what errors are logged if any?

Accessing the console is explained here: https://forum.figma.com/t/tutorial-how-to-open-console-in-figma/4570
Please look for errors starting from the bottom as the console 🙏

Don't hesitate to come and ping me on Discord if you'd prefer talking live: https://story.to.design/chat (my login there is remy.masson)

Best regards,
Remy

[yvonnegruber]

Hello Remy,

We were able to solve the problem with the comparison overview by always importing components in Advanced Mode. We don't get any errors here.

• Except for the checking part, does updating the component actually work?
  -- Yes, it works, you have to trigger it more often, but with a little patience, the error goes away and the update runs through
• Does this also happen with components with fewer variants?
  -- Yes
• When this happens, could you please take a look at the console to check if and which errors are being logged?

2024-10-14 10:56:39 [DEBUG] (backend) Error switching story, will bailout of group Error: frame.evaluate: Execution context was destroyed, most likely because of a navigation.
2024-10-14 10:56:39 [DEBUG] (backend) at Ii (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3246:4092)
2024-10-14 10:56:39 [DEBUG] (backend) at async /snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3246:97765
2024-10-14 10:56:39 [DEBUG] (backend) at async b3 (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3246:91267)
2024-10-14 10:56:39 [DEBUG] (backend) at async _Xt (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3246:97689)
2024-10-14 10:56:39 [DEBUG] (backend) at async sI (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3246:99685)
2024-10-14 10:56:39 [DEBUG] (backend) at async N (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3998:1131795)
2024-10-14 10:56:39 [DEBUG] (backend) at async Promise.all (index 0)
2024-10-14 10:56:39 [DEBUG] (backend) at async d1t (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3998:1133347)
2024-10-14 10:56:39 [DEBUG] (backend) at async Z1e (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3998:1137138)
2024-10-14 10:56:39 [DEBUG] (backend) at async e2e (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3998:1136029)
2024-10-14 10:56:47 [DEBUG] CLI state long polling stale, will retry
2024-10-14 10:56:47 [DEBUG] starting new connection: http://localhost:9265/
2024-10-14 10:57:02 [DEBUG] (backend) Error switching story, will bailout of group Error: frame.evaluate: Execution context was destroyed, most likely because of a navigation.
2024-10-14 10:57:02 [DEBUG] (backend) at Ii (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3246:4092)
2024-10-14 10:57:02 [DEBUG] (backend) at async /snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3246:97765
2024-10-14 10:57:02 [DEBUG] (backend) at async b3 (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3246:91267)
2024-10-14 10:57:02 [DEBUG] (backend) at async _Xt (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3246:97689)
2024-10-14 10:57:02 [DEBUG] (backend) at async sI (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3246:99685)
2024-10-14 10:57:02 [DEBUG] (backend) at async N (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3998:1131795)
2024-10-14 10:57:02 [DEBUG] (backend) at async Promise.all (index 0)
2024-10-14 10:57:02 [DEBUG] (backend) at async d1t (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3998:1133347)
2024-10-14 10:57:02 [DEBUG] (backend) at async Z1e (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3998:1137138)
2024-10-14 10:57:02 [DEBUG] (backend) at async e2e (/snapshot/webcomponents-editor/packages/s2d-cli/dist/cli.js:3998:1136029)
2024-10-14 10:57:02 [DEBUG] (backend) Processing story figma-components-form-button--basic 7/11 key=EismTg_U_1 args={disabled:false,leftIcon:true,rightIcon:true,size:md,variant:primary}

[muryoh]

Sorry about the late feedback @yvonnegruber, I meant the browser console

In Chrome (Figma Web)

• Open Developer Tools:
  Right-click anywhere on the page and select "Inspect".
  Alternatively, press Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac).
• Switch to the Console Tab:
  In the Developer Tools panel, click the "Console" tab.

In the Figma Desktop App

• Open Developer Tools:
  Press Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac) while the Figma app is focused.
  This will open the Developer Tools within the Figma app.
• Switch to the Console Tab:
  In the Developer Tools panel, click the "Console" tab to view logs, warnings, and errors.