Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Issue: react-ui-components cannot work with react17

Open
#309 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
38/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
nextjs, react, typescript
Domain
frontend, web-dev

Research direction

Start by running npm run dev in Guard/examples/nextjs-react with the stated React 17 and Next 12 setup. Read the reported stack locations in node_modules/@authing/react-ui-components and lib/index.min.js, then compare the example's dependency setup with the installed packages. Done means the example runs without the Invalid hook call error.

Written by the indexing model from the issue text.

Description

bug

  • Version:
    react 17, next 12 and the react-ui-components is the latest version

  • Platform:
    MAC

Severity:

Critical

Description:

run the nextjs-react example, it cannot work with reach17(default setup in the exaple)

Steps to reproduce the error:

folk the github code, in the folder Guard/examples/nextjs-react, run npm run dev, it will show this 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.

Call Stack
resolveDispatcher
node_modules/@authing/react-ui-components/node_modules/react/cjs/react.development.js (1465:0)
useEffect
node_modules/@authing/react-ui-components/node_modules/react/cjs/react.development.js (1508:0)
fW
node_modules/@authing/react-ui-components/lib/index.min.js (2:2209173)

Dominant language
TypeScript
Stars
1.4k
Forks
151
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Authing/Guard

All issues in Authing/Guard

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.