Going from Canvas to Docs and back crashes the component

[TheKnarf]

If I go from the Canvas-tab to the Docs-tab in Storybook, and then back to the Canvas-tab it crashes. This only happens when I have the storybook-xstate-addon activated. When I remove it from the .storybook/main.js config file it problem goes away.

Error:

Rendered more hooks than during the previous render.
Error: Rendered more hooks than during the previous render.
    at useHook (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-a4db13.iframe.bundle.js:7281:13)
    at useMemoLike (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-a4db13.iframe.bundle.js:7308:18)
    at useEffect (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-a4db13.iframe.bundle.js:7403:16)
    at useChannel (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-a4db13.iframe.bundle.js:7418:3)
    at withXstateInspector (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-a4db13.iframe.bundle.js:131967:82)
    at http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-a4db13.iframe.bundle.js:7186:21
    at http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-a4db13.iframe.bundle.js:24409:12
    at http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-a4db13.iframe.bundle.js:24467:12
    at http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-a4db13.iframe.bundle.js:7216:20
    at unboundStoryFn (http://localhost:6006/vendors-node_modules_storybook_addon-actions_preview_js-generated-config-entry_js-node_module-a4db13.iframe.bundle.js:24108:12)

[SimeonC]

Hi, I can't replicate it on the demo site so I'm going to need some more details from you please 🙇

• Storybook Version
• This Plugin Version
• If possible a reproduction where the issue happens - either a Repository or a Replay.io recording

[TheKnarf]

package.json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "start:storybook": "cross-env STORYBOOK_DISABLE_TELEMETRY=1 start-storybook -p 6006",
    "build:storybook": "cross-env STORYBOOK_DISABLE_TELEMETRY=1 build-storybook"
  },
  "dependencies": {
    "@xstate/react": "^3.0.1",
    "next": "13.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "xstate": "^4.33.6"
  },
  "devDependencies": {
    "@babel/core": "^7.19.6",
    "@mdx-js/react": "^1.6.22",
    "@storybook/addon-actions": "^6.5.13",
    "@storybook/addon-docs": "^6.5.13",
    "@storybook/addon-essentials": "^6.5.13",
    "@storybook/addon-interactions": "^6.5.13",
    "@storybook/addon-links": "^6.5.13",
    "@storybook/builder-webpack5": "^6.5.13",
    "@storybook/manager-webpack5": "^6.5.13",
    "@storybook/react": "^6.5.13",
    "@storybook/testing-library": "^0.0.13",
    "@types/node": "18.11.7",
    "@types/react": "18.0.24",
    "@types/react-dom": "18.0.8",
    "@xstate/inspect": "^0.7.0",
    "babel-loader": "^8.2.5",
    "cross-env": "^7.0.3",
    "eslint": "8.26.0",
    "eslint-config-next": "13.0.0",
    "storybook-xstate-addon": "^2.3.1",
    "typescript": "4.8.4"
  }
}

https://github.com/TheKnarf/storybook-xstate-test

[SimeonC]

Thanks for confirming the versions. On looking at this I can see why this is happening, I think it's the withXstateInspector decorator that needs to be split up into two components to avoid the error.

Due to work pressures it might be a while before I can get around to fixing it but I'm happy to review and merge a PR fixing it if anyone can get it done earlier.

[SimeonC]

Thanks to @HakimCh this should be fixed now. Please re-open if it's not.

[TheKnarf]

I've updated my test repo to version 2.3.6. Now instead of crashing when it goes to docs and then back, it now just crashes the docs page. When switching over to docs the docs flashes for a second and then becomes blank.

Please reopen the issue.

[SimeonC]

THanks for confirming, it looks like there's still more early returns that need removing.

[HakimCh]

Hello @TheKnarf,
I just created a new pull request, which should fix the problem!

[SimeonC]

PR merged and released. Let us know if it fixes the issue for you.