Guillermo Rodas

Google Developer Expert in Web Technologies

Community Organizer and Online Teacher

https://guillermorodas.com

@glrodasz

You can Google me as well.

Identifying the problem

DON'T PANIC WHEN YOU SEE AN ERROR

Let's try to analize what is happening

Error

Stack Trace

https://www.scalyr.com/blog/javascript-stack-trace-understanding-it-and-using-it-to-debug/

https://lucasfcosta.com/2017/02/17/JavaScript-Errors-and-Stack-Traces.html

https://stackoverflow.com/a/3988794/1360383

https://www.digitalocean.com/community/tutorials/js-stack-trace

SOURCE

MAPS

https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

https://blog.sentry.io/2015/10/29/debuggable-javascript-with-source-maps

https://code.tutsplus.com/tutorials/source-maps-101--net-29173

exercise

The first one is a components library project that has React as a dependency.

The second one is a web project that also has React as a dependency but at the same time, the components project is a dependency as well.

Two projects problem

Everything works perfectly when I run the web project as usual, but when I do a local linking using npm link or yarn link I got the following error:

Unhandled Runtime Error

Error: 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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Facts:

• It works without issues when there is not local linking.
• Both projects use the same version of React.
• The web project uses Next.js as framework.