无法在本地依赖中使用钩子。

huangapple go评论60阅读模式
英文:

Can't use hooks in local dependency

问题

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

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

Project 2

    <>
        <h1>Project 2 child added to component from project 3</h1>
        <Project3Component />
    </>
)

Project 3

    // 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-dom from the dependencies and devDependencies and only keeping them within peerDependencies within the package.json on projects we wish to include, to which I have done for both project 2 and project 3.

Since projects 2 and 3 these are under development, I have been building them locally and then including the dependencies 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 to work...
When considering the error message:

  1. Mismatching version of React - I have made sure that each project has React and React-dom 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-dependencies...
英文:

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 = () =&gt; (
    &lt;&gt;
      &lt;h1&gt;Project 1 child added to module from project 2&lt;/h1&gt;
      &lt;Project2Module/&gt;
    &lt;/&gt;
);

Project 2

export const Project2Module = (props) =&gt; (
    &lt;&gt;
        &lt;h1&gt;Project 2 child added to component from project 3&lt;/h1&gt;
        &lt;Project3Component /&gt;
    &lt;/&gt;
)

Project 3

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

    return (&lt;h1&gt;Project 3 child&lt;/h1&gt;);
}

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 &lt;project_name&gt;, npx link &lt;local_path_to_project&gt; and npm i --no-save &lt;local_path_to_project&gt;.

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...

答案1

得分: 2

我发现在这篇帖子中的建议对我非常有帮助!

基本上,我之前一直在每个项目上运行 npm install,这样我可以在本地构建它们,因为我引用了组件/模块等的 /dist 版本。

似乎 npm link 会将链接的项目的 node_modules 文件夹带入,这样在不同项目中多次执行此操作,它们必须已将它们全部编译成一个大文件夹,这意味着会有 3 种不同的 reactreact-dom 版本,就像错误消息中建议的那样。

为了解决这个问题,我从子依赖项的 node_modules 中删除了 reactreact-dom,然后重新构建。

解决方法实际上非常简单。只是有点遗憾的是,没有太多信息告诉你这可能发生。

英文:

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.

huangapple
  • 本文由 发表于 2023年4月19日 22:36:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/76055776.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定