Rollup component "Invalid hook call" after being built, and imported in another React project

Question

I'm having some weird issues here with Rollup. If anyone is more-versed than I am, please, any help would be appreciated!

First off, I need to say that I see some similar issues here:

• Creating react library with rollup.js i get error null (reading 'useState')
• https://github.com/facebook/react/issues/14721

However even after trying these above proposed fixes, I am still having the same issues and I cannot put my finger on the exact problem as to what im missing. I hope that one of you can point me in the right direction.

I also decided to create a public github repo for this over here for my full project:

"Library" https://github.com/FredM7/test-button

"Application" https://github.com/FredM7/simple_site

I'm trying to keep things very simple. Right now I don't even try to import CSS yet, I just want React to work with Rollup as I would expect.

Let me explain my summarized issue here:

• When I take the above project, and I build it locally on my machine, it builds successfully. I see a /dist folder bing created

All of this, appears correct to me so far. I'm happy.

• Now, I also need to mention that I am installing this on my OTHER project this way, inside my package.json file:

"@myorg/test-button": "file:/Users/fred/Documents/Development/test/test-button/dist",

You can see for now, I use file:/ so that I can develop locally instead of deploying to NPMJS which takes too much time. By the way, after depolying this to NPMJS, I get the same results, no difference. (I read somewhere about react symlinks, npm link or something, but I doubt this is the issue? Anyways.)

• In another React project, I would use it like this:

import React from "react";
import { ReactPaymentButton } from "@myorg/test-button";

export const HomePage = () => {
  return (
    <div className="pt-4">
      <ReactPaymentButton label="Hello" />
    </div>
  );
};

If my payment button does NOT use a useEffect, the Button gets imported fine in my OTHER project as indicated here, we see "Hello" which is the button.

• However the moment I add the useEffect on the test-button project/repository (as indicated by my GitHub repository above) i get the following error:

Warning: 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 this point im not sure what im missing, does anyone else perhaps know what i could be missing?

Any help woudl be greatly appreciated! Please let me know if there is anything else I can provide that would help! Any comments welcome! Thanks

EDIT: I also executed npm ls react in my simple website as indicated here:

[email protected] /Users/fred/Documents/Development/test/simple_site
├─┬ @reduxjs/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├── [email protected] deduped
│ └─┬ [email protected]
│   └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
└── [email protected]

I don't specifically see my package here.

EDIT: I also performed the linking as suggested by ALTHAF PJALEEL below.

In my Library

In my Application

Usage in Application

New npm ls react output

[email protected] /Users/fred/Documents/Development/test/simple_site
├─┬ @myorg/[email protected] extraneous -> ./../test-button
│ ├─┬ [email protected] extraneous
│ │ └── [email protected] deduped
│ └── [email protected] extraneous
├─┬ @reduxjs/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├── [email protected] deduped
│ └─┬ [email protected]
│   └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
└── [email protected]

I see a new [email protected] extraneous there

EDIT: I added my "Application" project above.

Answer 1

I have faced the very same issue while developing a component library and here is what helped me fix it. In my case, I was facing the issue when I use the local copy of the Library, not when I push to npm. So I suggest you to please re-check that part.

If you are facing this locally only, then

As the error message indicates, you are having duplicate react copies here. One from the project which exports the test-button component (lets call it Library) and the other from the project which imports the test-button component (lets call it Application).

To fix this issue, you need to tell your Library to use the same copy of react which your Application uses. npm link is the easiest way to do this. Pleas remove the file protocol for installing the Library and follow below steps

1. Inside your Library, do npm link
2. Inside your Library do npm link ${path_to_Application}/node_modules/react
3. Inside your Application, do npm link ${name of your Library ('name' field from package.json)}

This should fix your issue. Here is the official doc on this. (open this in Chrome)

if you are also facing this after pushing your Library to npm as well, then

Few suggestions I can give which you can check are

1. Do npm ls react inside Application to see the react copies being used
2. If there are multiple copies, your Library and Project might be asking for incompatible versions of react. Bring them to the same version