Error: Invalid hook call

[GonzaloHuerta]

I implemented add-to-home-screen-react in a project with react version 16.13.1 and it works perfect but in another project with version 17.0.1 it throws: Error: Invalid hook call. Any idea why? Thank you!

[stuf]

The Invalid hook call error arises a lot of the time from React being bundled multiple times in the project — in this case you might have two different React versions installed; this library depends on React v16.13.1 (exact version16.13.1), while your project is running on v17.

Even if the version in dependencies were ^16.13.1 (from version 16.13.1 upwards until but not including 17.0.0) I'd guess it would still cause issues.

Edit: Been wrestling with the exact same error in another project (not through this library however, but found this from a discussion at work), where the problem was that there were multiple versions installed.

[stuf]

@GonzaloHuerta However! If this is still a problem, or if it happens in the future, you might find success with specifying a resolver in your package.json file:

  "scripts": { ... },
  "dependencies": { ... },
  "resolutions": {
    "**/react": "^17.0.1",
    "**/react-dom": "^17.0.1"
  },
  ...

[AbuSM]

Any news on this issue?

[AbuSM]

IDK why, but I fixed this by removing node_modules from @ideasio/add-to-homescreen-react which is located in node_modules of application

[JuhQ]

I had the same issue.

I think it's caused by this projects package.json declaring react as dependency, not as dev or peer dependency.

https://stackoverflow.com/questions/30451556/what-is-the-correct-way-of-adding-a-dependency-to-react-in-your-package-json-for

[tolmekian1453]

Yeah, a common issue with React libs. I tried copying it into my src instead of including it in my package.json, but it won't build that way cause it uses some language extensions or something. So I forked it and removed the react deps altogether because I'm not sure what the peer dependencies should be set to.

This really should be fixed. In the meantime, for anyone who wants to use my fork, I warn you that I'm no expert, but here:
npm install git+https://github.com/tolmekian1453/add-to-homescreen-react
import AddToHomeScreen from '@ideasio/add-to-homescreen-react';