search

SimeonC / storybook-xstate-addon

A storybook addon to assist with writing stories that rely on xstate
https://SimeonC.github.io/storybook-xstate-addon/
MIT License
54 stars 6 forks source link

"Invalid hook call" when adding preset #15

Closed ThomasKuhlmann closed 3 years ago

ThomasKuhlmann commented 3 years ago

Hi!

I keep getting an error every time I enable this add-on - and I'm not familiar with React, so not sure if this is related to my storybook setup or this add-on...

Error

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (http://localhost:6006/vendors~main.iframe.bundle.js:166347:13)
    at Object.useRef (http://localhost:6006/vendors~main.iframe.bundle.js:166386:20)
    at withXstateInspector (http://localhost:6006/vendors~main.iframe.bundle.js:173617:25)
    at http://localhost:6006/vendors~main.iframe.bundle.js:11053:21
    at http://localhost:6006/vendors~main.iframe.bundle.js:27139:28
    at http://localhost:6006/vendors~main.iframe.bundle.js:27145:17
    at push../.storybook/preview.js.decorators (http://localhost:6006/main.iframe.bundle.js:1104:17)
    at http://localhost:6006/vendors~main.iframe.bundle.js:11053:21
    at http://localhost:6006/vendors~main.iframe.bundle.js:27139:28
    at http://localhost:6006/vendors~main.iframe.bundle.js:11080:20

Versions

Storybook 6.2.8 storybook-xstate-addon 1.0.3

Any pointers would be very much appreciated!

SimeonC commented 3 years ago

Hey! Thanks for the big report, I noticed this yesterday as well but for me it didn't break anything and I didn't have time to think about it.

I think I know the reason for this and can fix it soonish.

SimeonC commented 3 years ago

Should be fixed in 1.0.4.

ThomasKuhlmann commented 3 years ago

@SimeonC I just checked the new version, something has definitely changed, but I am now getting a different error

TypeError: Cannot add property components, object is not extensible
    at prepare (http://localhost:6006/vendors~main.iframe.bundle.js:27103:24)
    at http://localhost:6006/vendors~main.iframe.bundle.js:27157:14
    at http://localhost:6006/vendors~main.iframe.bundle.js:27145:17
    at push../.storybook/preview.js.decorators
SimeonC commented 3 years ago

Weird, I can't replicate that one. Can you give me a reproduction repository so I can debug it?

ThomasKuhlmann commented 3 years ago

Certainly, I set up a minimal version here:

https://github.com/ThomasKuhlmann/sb-xstate

SimeonC commented 3 years ago

Ok, Vue... I think it should be fixable (TBH haven't used Vue yet, but storybook shouldn't have issues I don't think). Thanks for the repo, that will help a lot with figuring out why it's not working.

It might take me a week or two to find the time to dive into it as work's pretty hectic this + next week.

ThomasKuhlmann commented 3 years ago

No problem, let me know if there's anything I can do to help! No idea about react, but I do know a fair bit about Vue :)

SimeonC commented 3 years ago

Apparently I not only didn't manage to fix this but made it worse 🤦

Still working on trying to figure out how to get this to run in non-react apps.

SimeonC commented 3 years ago

Raised an MR on your repository with the working version. It looks like part of the fix was that storybook requires react to run (I think), you can probably move react to devDeps.

I think this should be fixed now ✨ 😅

ThomasKuhlmann commented 3 years ago

Thanks for your help! I've made the changes you suggested (latest version, removed 'preset' and added xstate: true ) - that was enough to get it working, no additional react as devDependency needed