React hooks result in breakage when trying to use react in vue

[ZelCloud]

I've recently tried to use the react beautiful dnd library within a vue app. Unfortunately just by adding the DragDropContext the following error appears.

react_devtools_backend.js: 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.

From the above 1 and 3 aren't the problem since I can verify I have only one copy of react and other react components work. As well as that the react and react dom libraries are the same version.

Which leaves issue 2. breaking the rules of hooks. Which according the reactjs docs. (https://reactjs.org/warnings/invalid-hook-call-warning.html). Are the following cases

🔴 Do not call Hooks in class components.
🔴 Do not call in event handlers.
🔴 Do not call Hooks inside functions passed to useMemo, useReducer, or useEffect.

and unfortunately I dont know enough of the internals of vuera to even attempt to figure out how the above interact or are transformed to work with vue.

[hongtaodai]

the same problem! do u solved it?

[akxcv]

There's a similar issue described in #101. I've also tried to reproduce this in #123, but so without success. Could you please take a look at #101?

[ppfalling]

It is the version of react and react-dom, i solve it by updating the version of them.

[builtschlegel]

posting in case its helpful, these are the bits required for the vue app + any kind of jest/test setup

vue

import Vue from 'vue';
import App from '@/app/App.vue';
import router from '@/app/App.router';
import store from '@/app/store/App.store';
import {VuePlugin} from 'vuera';

Vue.use(VuePlugin);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

jest

import Vue from 'vue';

import {VuePlugin} from 'vuera';


beforeAll(() => {
  Vue.use(VuePlugin);
});

[willisplummer]

I've run into this issue as well. Something related that I've noticed is that in the transpilation stage it seems that react function components aren't handled correctly. Instead of being passed a props object they receive a FunctionalRenderContext. wonder if this points at the underlying issue?

[nopeless]

Having these issues as well

[kasia-basia]

Same here :(

[eatorres2]

Any updates on fixing this issue?