英文:
Can't use hooks in local dependency
问题
I have 3 local React projects
- My UI project which has (2) and (3) as dependencies
- My project which contains an exported module, which has (3) as a dependency
- 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:
- Mismatching version of React - I have made sure that each project has
React
andReact-dom
on the same version of 18. - Breaking rules of Hooks - I'm certain this is not the case from each project's perspective.
- Might have more than one copy of react - I was hoping this is what
npx link
andnpm i --no-save
would have solved, along with only keepingreact
andreact-dom
within thepeerDependencies
of the sub-dependencies...
英文:
I have 3 local React projects
- My UI project which has (2) and (3) as dependencies
- My project which contains an exported module, which has (3) as a dependency
- 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 the
dependenciesand
devDependenciesand only keeping them within
peerDependencieswithin the
package.jsonon projects we wish to include, to which I have done for both
project 2and
project 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:
- Mismatching version of React - I have made sure that each project has
React
andReact-dom
being on the same version of 18. - Breaking rules of Hooks - I'm certain this is not the case from each project's perspective.
- Might have more than one copy of react - I was hoping this is what
npx link
andnpm i --no-save
would have solved, along with only keepingreact
andreact-dom
within thepeerDependencies
of the sub-dependancies...
答案1
得分: 2
我发现在这篇帖子中的建议对我非常有帮助!
基本上,我之前一直在每个项目上运行 npm install
,这样我可以在本地构建它们,因为我引用了组件/模块等的 /dist
版本。
似乎 npm link
会将链接的项目的 node_modules
文件夹带入,这样在不同项目中多次执行此操作,它们必须已将它们全部编译成一个大文件夹,这意味着会有 3 种不同的 react
和 react-dom
版本,就像错误消息中建议的那样。
为了解决这个问题,我从子依赖项的 node_modules 中删除了 react
和 react-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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论