search

apenab / react-dymo

Collections of react utilities to handle the Dymo LabelWriter web service
26 stars 10 forks source link

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

Open etorsuarezm opened 1 year ago

etorsuarezm commented 1 year ago

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

App_js_—_dymo-demo

5.- npm start

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

React_App

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 commented 1 year ago

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

umangcodes commented 1 year ago

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 commented 6 months ago

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.