Trouble using stateful functional React component in Vue project

[grtjn]

I have a Vue project in which I wanted to pull in a React component written by someone else. I have used Vuera before to do the same thing with a different React component, and it worked fine in the other case, but not for this one. This particular component is written in functional style, with hooks, and whatever I try, I end up with a Invalid hook call. Hooks can only be called inside of the body of a function component. message, even though that same component works just fine in a React project.

I debugged it down to the React resolveDispatcher function, which is returning null, probably because React environment is not getting initialized properly.

I am trying to pull in this pretty small component: https://github.com/marklogic-community/grove-react-map-components/blob/master/src/MapProvider.js. (I have a built version of that package locally, linked to my vue project.)

I was using a fairly straight-forward setup with this in my main.js:

import { VuePlugin } from 'vuera';
Vue.use(VuePlugin);

One of my Vue pages contains this as part of the template:

<MapProvider>
      <div>hello</div>
</MapProvider>

And the following bits in the script section:

import {
  MapProvider,
  OpenLayersSearchMap,
} from "grove-react-map-components";

export default {
  components: {
    MapProvider,
    OpenLayersSearchMap,
  },

The OpenLayersSearchMap component comes from the same package. It is a class-style component, and works just fine. The above mentioned error get triggered by this line that invokes React's useState() hook function:

https://github.com/marklogic-community/grove-react-map-components/blob/master/src/MapProvider.js#L6

I have been poking at this for a couple of days, and searched the web a lot, but all it brings up is that there might be 2 versions of react floating around (which is not the case), or it is a bad component (not true either).

Any thoughts on this appreciated..

[pengiundev]

Any update on this?

[pavelliolia]

The same problem... Everything is working great until I start using React hooks :(

[ZelCloud]

Same experience here react hooks completely break react usage in vue. There's also no examples or documentation anywhere about how to even attempt to fix it.

[akxcv]

I'm having trouble reproducing this in tests. I'm rendering a simple React component with a useState hook inside of Vue, and it's working fine.

Could you please provide a test case?

Info about Vue/React versions would also be helpful.

[zack-pronto]

@akxcv Here's a very simple example. I'm using the basic CodeSandbox vue template with a dead simple React component that does a button click counter. Right now I've commented out the portion where we actually use the useState hook so everything compiles as expected, but if you uncomment that line (line 4), you'll start seeing errors.

https://codesandbox.io/s/old-framework-d2n8e?file=/src/components/TestReact.js

Here's the error:

[ppfalling]

I'm having trouble reproducing this in tests. I'm rendering a simple React component with a useState hook inside of Vue, and it's working fine.

Could you please provide a test case?

Info about Vue/React versions would also be helpful.

Is in a react app ?

[soneway]

Check the component's React and Vuera's React is a same npm package

[nopeless]

I'm having trouble reproducing this in tests. I'm rendering a simple React component with a useState hook inside of Vue, and it's working fine.

Could you please provide a test case?

Info about Vue/React versions would also be helpful.

I can't find any file containing the word useState in the repository

[thqueiroz]

I'm having the same problem. Is there some any about this issue?