Error: Invalid hook call

[Morgul]

Current behavior

When attempting to add vue-styleguidist to my project or run any of the examples, after getting the 'Compiled successfully!' message, navigating to http://localhost:6060/ yields:

It looks to be related to these warnings when running npm install:

> npm install
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^17.0.2" from [email protected]
npm WARN   node_modules/vue-styleguidist
npm WARN     dev vue-styleguidist@"^4.36.1" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@">=15.5 <=16.x" from [email protected]
npm WARN node_modules/react-codemirror2
npm WARN   react-codemirror2@"^7.2.1" from [email protected]
npm WARN   node_modules/vue-styleguidist
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^17.0.2" from [email protected]
npm WARN   node_modules/vue-styleguidist
npm WARN     dev vue-styleguidist@"^4.36.1" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.0.0" from [email protected]
npm WARN node_modules/react-simple-code-editor
npm WARN   react-simple-code-editor@"^0.11.0" from [email protected]
npm WARN   node_modules/vue-styleguidist
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN   react-dom@"^17.0.2" from [email protected]
npm WARN   node_modules/vue-styleguidist
npm WARN     dev vue-styleguidist@"^4.36.1" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.0.0" from [email protected]
npm WARN node_modules/react-simple-code-editor
npm WARN   react-simple-code-editor@"^0.11.0" from [email protected]
npm WARN   node_modules/vue-styleguidist
npm WARN deprecated [email protected]: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 1287 packages, and audited 1288 packages in 15s

93 packages are looking for funding
  run `npm fund` for details

13 vulnerabilities (11 moderate, 2 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

To reproduce

1. Clone the repository
2. cd /examples/basic
3. npm install
4. npm run styleguide
5. open http://localhost:6060

Expected behavior

I expected the generated documentation to run.

[elevatebart]

Can you share what version of npm you are using? I am wondering if this could be what I am missing.

[Morgul]

@elevatebart I am using the latest npm, but with node v14:

> npm --version
7.18.1
> node --version
v14.15.4

(In npm v7 they changed to automatically install peer dependencies, that could be it.)

[elevatebart]

You are absolutely right, I think it is.

React is being "facebook" like again, and since it needs only one version of react, there is at leas one component that uses another instance of react than the others.

By "facebook" like I mean "go fast break everybody's things"

[elevatebart]

I will try to find a solution, but it might need a breaking change.

[Morgul]

As a work around for anyone else who runs into this, it appears that installing [email protected] and [email protected] works, but you have to force the install:

> npm install [email protected] [email protected] --force

Everything seems to work, but YMMV.

[elevatebart]

OK, in 5 I am doing a complete rewrite in vue3. We should not have this problem anymore ;) No react, no trouble ^^

[Morgul]

@elevatebart Awesome. Will it be able to still work for Vue2 projects? (Stuck building new apps against 2 until BootstrapVue updates, sadly.)

[apertureless]

I am experiencing the same error.

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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Ribbon (webpack:///./node_modules/react-styleguidist/lib/client/rsg-components/Ribbon/Ribbon.js?:11:114)
    at div
    at StyleGuideRenderer (webpack:///./node_modules/vue-styleguidist/lib/client/rsg-components/VsgStyleGuide/StyleGuideRenderer.js?:82:23)
    at _class (webpack:///./node_modules/react-styleguidist/lib/client/rsg-components/Styled/Styled.js?:62:28)
    at StyleGuide (webpack:///./node_modules/react-styleguidist/lib/client/rsg-components/StyleGuide/StyleGuide.js?:91:29)
This may be due to an error in a component you are overriding, or a bug in React Styleguidist.

If you believe this is a bug, please submit an issue.

---

npm --version
7.22.0 

node --version
v14.17.6

I've tried npm install [email protected] [email protected] --force but it did not solve the issue.

Any workarounds?

[ext]

This issue has persited for quite a while, wouldn't a better solution be to downgrade react to v16 in vue-styleguidist until all it's dependencies support it?

Of course a rewrite in Vue 3 is better in the long term but it might take a while (and it shouldn't be rushed in my opinion).

However this issue is making it nearly impossible to use (we have been stuck on 4.35.0 which via transitive dependencies relies on way to many deprecated dependencies). The suggested workaround is only good for sometimes maybe getting things running right now but it makes it really hard as you basically have to redo it everytime something else changes (good luck when you have an entire team of developers all running into this issue all the time)

So again, these packages are nearly useless as of right now. Harsh words I know but this bug has been open for half a year and present since 4.36.0 was released in 2021-03-18.

I would gladly help by creating a PR if a maintainer could just confirm that it is a reasonable approach.

[elevatebart]

With the amount of customization possible with vue-styleguidist 4, downgrading ReactJs is a breaking change of its own. If anyone uses any feature of React 17, their code would break after the upgrade.

I understand the urgency of this issue. Here is what I suggest: Let's publish a breaking version on a separate tag (say @react16).

This way it is opt-in and still maintained at the same time as styleguidist (only on a branch) until v5 is out.

npm install vue-styleguidist@react16 would install version 4.X.X-react16 and exist on its own.

Would it be OK?

[ext]

Would definitely be better than the current situation :)

[josiahayres]

As a work around for anyone else who runs into this, it appears that installing [email protected] and [email protected] works, but you have to force the install:

> npm install [email protected] [email protected] --force

Everything seems to work, but YMMV.

This worked in my project using Vue 2.6.7!

[panvicka]

As a work around for anyone else who runs into this, it appears that installing [email protected] and [email protected] works, but you have to force the install:

> npm install [email protected] [email protected] --force

Everything seems to work, but YMMV.

This worked for me, using Vue 2.6.12 and Webpack 5.27...