When trying to use useDymoCheckService I get "Uncaught Error: Invalid hook call."

[etorsuarezm]

Hi, there seems to be an issue with useDymoCheckService()

When trying to use it it throws an error.

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

This is pretty simple to reproduce.
1.- Start a new react project
npx create-react-app dymo-demo
2.- cd dymo-demo/
3.- npm install react-dymo-hooks
4.- Open the code and in App.js simply call the useDymoCheckService() method like so...

5.- npm start

Result
Blank screen with the error in the console. Following the debugger is pointing at this part of the code..

My package.json looks like this...

{
"name": "dymo-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dymo-hooks": "^2.0.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

[apenab]

Hi, thx for the report, I´ll try to fix the error ASAP

[umangcodes]

I have had this issue many times before. There is a simple solution.

This library depends on an older version of react and react-dom. You need to go inside the dependency tree of the library and then modify the package.json to link the library to the main project's react current version.

This should resolve the issue. The commands can be found online (npm link).

PS. @apenab Thanks for creating this package! Extremely useful!

[0llamh]

I ran into this issue specifically in my local environment, but on either my staging or production server. It was driving me insane. After a bunch of research, I was able to resolve this issue following this walkthrough:
https://stackoverflow.com/a/57422196

No peerDependency. No reverting versions of react (this wasn't an option for me anyway).

I ran yarn link in my virtual environment terminal in both my react\ and react-dom\ directories in my node_modules\ and finally ran yarn link react and yarn link react-dom in the react-dymo-hooks\ directory in the same node_modules\

Hope this helps other developers.

[bertrandyvernault]

I run into the same error when I upgrade my app to react 18.

To help futur people, the easiest way to fix it is to overrides in your packages.json the react and react-dom version used by the lib

This way with :

"overrides": {
  "react-dymp-hooks": {
    "react": "18.3.1",
    "react-dom": "18?3?1
  }
}

Be careful, this is the way of overrides if you use npm. If you are using yarn, i think it's resolutions.

I hope this helps too.

[hxk1633]

Has this issue been fixed? I tried what @0llamh and @bertrandyvernault suggested, but it still gives me the same error. I'm using Vite v5.4.9 if that helps.

[hxk1633]

Nevermind, I was able to fix it by doing what @0llamh found. It looks like I need to do this every time I install new package. This can get very annoying. Can this issue be fixed so we don't have to do this?

[bertrandyvernault]

My solution didn't work for you ? Be careful, if you are using yarn, the writing is different.

Don't forget to clean your .lock and node-modules.

I think to clean this, need to move the react dependency to peerDependencies