React component with hooks throws error in Vue

[smimon]

When I build the simplest React component I can which uses any hooks, import into a Vue project and attempt to wrap it with applyPureReactInVue, I get errors such as:

If I leave the hooks out, it renders.

I have set rollup options to make 'react' and 'react-dom' external to the React component so that React is not bundled, since the error seems to indicate more than one version of React was found, but this hasn't helped. React component vite config:

Please see repo https://github.com/smimon/veaury-react-hooks-in-vue for simplest reproduction.

"npm install" and "npm run build" in my-react-component folder first to build the component, then "npm install" and "npm run dev" in my-vue-app to see the issue (react component is referenced from a relative path on the file system into the Vue app).

Any help is much appreciated :)

[smimon]

Things I've tried:

• importing the component and using it in a simple react app works fine
• switching to rollup for the component build config - it produces a much smaller, cleaner output which still works in the React app, but gives the same error with Veuary in the Vue app
• downloading 3rd party React components from npm and using them with Veuary in this Vue app works fine

Vue app in my test repo is now using the "my-react-component-rollup" version.

[smimon]

Ok finally got to the bottom of it.

Importing the package from the local file system into my Vue app like this:

"my-react-component-rollup": "file:../my-react-component-rollup"

was creating a symbolic link to the component's folder, which was then in turn picking up the version of React from my component's node_modules folder in addition to the one in the Vue app. The React app wasn't suffering from this issue however.

When I just imported the component into the Vue app from the compiled JS file directly, and removed the file system reference, it worked.

[devilwjp]

@smimon This problem is actually caused by the fact that the react imported by your react component and the react imported by the vue project are not the same react.

Using the "file:..." file link method is a solution. A better way is to use the Menorepo project. You can use lerna or nx or the standard npm menorepo cli to build and publish

[smimon]

Ok I got it, thanks for taking the time to look.

On Sun, 21 Jan 2024 at 16:11, 天堂里的花大咩（深夜架构师） @.***> wrote:

@smimon https://github.com/smimon This problem is actually caused by the fact that the react imported by your react component and the react imported by the vue project are not the same react.

Using the "file:..." file link method is a solution. A better way is to use the Menorepo project. You can use lerna or nx or the standard npm menorepo cli to build and publish

— Reply to this email directly, view it on GitHub https://github.com/devilwjp/veaury/issues/108#issuecomment-1902563748, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAR74JBUMVPWJ7SHMAYCL23YPTLUXAVCNFSM6AAAAABCBGRFKKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBSGU3DGNZUHA . You are receiving this because you were mentioned.Message ID: @.***>