Error: Invalid hook call. Using latest React Version

[johnkelleher]

Steps to reproduce

Install a new CRA project
npx create-react-app test-app --template typescript

Install react-oidc
yarn add oidc-react

Create a new react component Routes.tsx file (OIDC Config copied from https://github.com/cobraz/example-oidc-react/blob/master/src/App.tsx) and add <Routes /> to App.tsx

// Routes.tsx 

import React from 'react';
import { AuthProvider } from 'oidc-react';

const oidcConfig = {
    onSignIn: async (user: any) => {
      alert('You just signed in, congratz! Check out the console!');
      console.log(user);
      window.location.hash = '';
    },
    authority: 'https://accounts.google.com',
    clientId:
      '1066073673387-undfdseanu1soilcdprq1p4m8gq8a1iu.apps.googleusercontent.com',
    responseType: 'id_token',
    redirectUri:
      process.env.NODE_ENV === 'development'
        ? 'http://localhost:3000/'
        : 'https://cobraz.github.io/example-oidc-react',
  };
  
export const Routes = () => (
    <AuthProvider {...oidcConfig}>
          <p>OIDC React</p>
    </AuthProvider>
  );

Start the app
yarn start

Expected behaviour

The app should load and I should be redirected to the Google authority page https://accounts.google.com

Actual behaviour

The app does not load instead displaying the error Error: Invalid hook call. (full error below)

Note

If I remove <AuthProvider {...oidcConfig}> from the Routes.tsx file the app loads

---

Also if I change the react and react-dom version in package.json to

    "react": "^16.13.1",
    "react-dom": "^16.13.1",

run yarn install and yarn start

the app loads and I am redirected to the Google authority page https://accounts.google.com

Full 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.
    at resolveDispatcher (react.development.js:1465)
    at Object.useState (react.development.js:1496)
    at push../node_modules/oidc-react/build/src/AuthContext.js.exports.AuthProvider (AuthContext.js:75)
    at renderWithHooks (react-dom.development.js:14977)
    at mountIndeterminateComponent (react-dom.development.js:17803)
    at beginWork (react-dom.development.js:19041)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23956)
    at performUnitOfWork (react-dom.development.js:22771)
    at workLoopSync (react-dom.development.js:22699)
    at renderRootSync (react-dom.development.js:22662)
    at performSyncWorkOnRoot (react-dom.development.js:22285)
    at scheduleUpdateOnFiber (react-dom.development.js:21873)
    at updateContainer (react-dom.development.js:25474)
    at react-dom.development.js:26013
    at unbatchedUpdates (react-dom.development.js:22423)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:26012)
    at Object.render (react-dom.development.js:26095)
    at Module../src/index.tsx (index.tsx:7)
    at __webpack_require__ (bootstrap:784)
    at fn (bootstrap:150)
    at Object.1 (serviceWorker.ts:149)
    at __webpack_require__ (bootstrap:784)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
resolveDispatcher @ react.development.js:1465
useState @ react.development.js:1496
push../node_modules/oidc-react/build/src/AuthContext.js.exports.AuthProvider @ AuthContext.js:75
renderWithHooks @ react-dom.development.js:14977
mountIndeterminateComponent @ react-dom.development.js:17803
beginWork @ react-dom.development.js:19041
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23956
performUnitOfWork @ react-dom.development.js:22771
workLoopSync @ react-dom.development.js:22699
renderRootSync @ react-dom.development.js:22662
performSyncWorkOnRoot @ react-dom.development.js:22285
scheduleUpdateOnFiber @ react-dom.development.js:21873
updateContainer @ react-dom.development.js:25474
(anonymous) @ react-dom.development.js:26013
unbatchedUpdates @ react-dom.development.js:22423
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26012
render @ react-dom.development.js:26095
./src/index.tsx @ index.tsx:7
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ serviceWorker.ts:149
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 The above error occurred in one of your React components:

    at push../node_modules/oidc-react/build/src/AuthContext.js.exports.AuthProvider (http://localhost:3000/static/js/0.chunk.js:11965:5)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
logCapturedError @ react-dom.development.js:20077
update.callback @ react-dom.development.js:20110
callCallback @ react-dom.development.js:12310
commitUpdateQueue @ react-dom.development.js:12331
commitLifeCycles @ react-dom.development.js:20728
commitLayoutEffects @ react-dom.development.js:23418
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23143
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11268
commitRoot @ react-dom.development.js:22982
performSyncWorkOnRoot @ react-dom.development.js:22321
scheduleUpdateOnFiber @ react-dom.development.js:21873
updateContainer @ react-dom.development.js:25474
(anonymous) @ react-dom.development.js:26013
unbatchedUpdates @ react-dom.development.js:22423
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26012
render @ react-dom.development.js:26095
./src/index.tsx @ index.tsx:7
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ serviceWorker.ts:149
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1

[github-actions]

🎉 This issue has been resolved in version 1.1.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀