Can't use hooks in local dependency

Question

I have 3 local React projects

1. My UI project which has (2) and (3) as dependencies
2. My project which contains an exported module, which has (3) as a dependency
3. My component library and context holder

All projects are on React 18.

The problem I am facing is that when (2) is using a component from (3) that uses a hook such as useEffect I am getting the error:

And a subsequent error message states that the error stems from the component in (3) that I'm using within (2).

This can be seen to be the case by removing the useEffect hook within the component in (3) and re-building everything again, as I can now get the correct output in the browser:

Project 1

const App = () => (
    <>
      <h1>Project 1 child added to module from project 2</h1>
      <Project2Module/>
    </>
);

Project 2

export const Project2Module = (props) => (
    <>
        <h1>Project 2 child added to component from project 3</h1>
        <Project3Component />
    </>
)

Project 3

export const Project3Component = (props) => {
    // Comment out this useEffect and it will render, include it and it will error
    useEffect(() => {
        console.log('Inside project 3 component');
    }, []);

    return (<h1>Project 3 child</h1>);
}

I have read all over the web about removing react and react-domfrom thedependenciesanddevDependenciesand only keeping them withinpeerDependencieswithin thepackage.jsonon projects we wish to include, to which I have done for bothproject 2andproject 3`.

Since projects 2 and 3 these are under development, I have been building them locally and the including the dependancies by all forms of inclusion such as yalc, npm link <project_name>, npx link <local_path_to_project> and npm i --no-save <local_path_to_project>.

I cannot think of anything else I can possibly do to get this work... When considering the error message:

1. Mismatching version of React - I have made sure that each project has React and React-dom being on the same version of 18.
2. Breaking rules of Hooks - I'm certain this is not the case from each project's perspective.
3. Might have more than one copy of react - I was hoping this is what npx link and npm i --no-save would have solved, along with only keeping react and react-dom within the peerDependencies of the sub-dependancies...

Answer 1

I found that the suggestions in this post helped me out immensely!

Essentially what I had been doing is running npm install on each of my projects such that I could build them locally as I was referencing the /dist versions of components/modules etc.

It seems that npm link would bring the node_modules folder of the linked project in, and doing this multiple times across different projects it must have compiled them all into one big one, which means there would be 3 different react and react-dom versions as it suggested in the error message.

To solve this, I deleted react and react-dom from the node_modules from the subdependencies and then re-built.

The solve was actually quite simple. It's just a shame there wasn't much to tell you how this could happen.