React hooks result in breakage when trying to use react in vue
ZelCloud opened this issue · 8 comments
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.
the same problem! do u solved it?
It is the version of react and react-dom, i solve it by updating the version of them.
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);
});
Having these issues as well
Same here :(
Any updates on fixing this issue?