Hi guys,
I applied all the great remarks I receive...
# ask-a-descopern
numerous-continent-44612
07/04/2023, 7:39 PMHi guys,
I applied all the great remarks I received from the one and only @great-diamond-35515 and indeed all the Warnings and Erros disappeared!
However, when I ran my app, I get an empty screen instead of my login window. there are no errors,
I would deeply appreciate any help here
g
great-diamond-35515
07/04/2023, 7:43 PMHey 👋
Can you share a har file with the reproduction of the issue? And perhaps the sample of the code that uses Descope?
great-diamond-35515
07/04/2023, 7:43 PMAlso, want errors in the browser console?
n
numerous-continent-44612
07/04/2023, 7:46 PMoh you're right.. lots of errors in the browser console...
numerous-continent-44612
07/04/2023, 7:46 PMconst AppRoot = () => {
return (
<div className="container">
<AuthProvider projectId='P2S4sM8KKC0gdOu0eBgmT4v0gfvf' >
<App />
</AuthProvider>
</div>
)
}
const App = () => {
const { isAuthenticated, isSessionLoading } = useSession()
const { user, isUserLoading } = useUser()
const { logout } = useDescope()
// const handleLogout = useCallback(() => {
// logout()
// }, [logout])
return (
<div>
{!isAuthenticated &&
(
<Descope
flowId="sign-in"
onSuccess = {(e) => {
console.log(e.detail.user.name)
console.log(e.detail.user.email)
}}
onError={(e) => console.log('Could not log in!')}
/>
)
}
{
(isSessionLoading || isUserLoading) && <p>Loading...</p>
}
{ isAuthenticated &&
( // this is the APP!
<>
<MyComponent />
</>
)
}
</div>
)
}
numerous-continent-44612
07/04/2023, 7:47 PMAbove is the Descope code that I use
numerous-continent-44612
07/04/2023, 7:48 PMThe errors I get on browser console:
Warning: 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
error @ react.development.js:183
resolveDispatcher @ react.development.js:1592
useState @ react.development.js:1621
E @ AuthProvider.tsx:31
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react.development.js:209 Warning: 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
error @ react.development.js:183
resolveDispatcher @ react.development.js:1592
useState @ react.development.js:1621
E @ AuthProvider.tsx:31
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react.development.js:1622 Uncaught TypeError: Cannot read properties of null (reading 'useState')
at useState (react.development.js16221)
at E (AuthProvider.tsx311)
at renderWithHooks (react-dom.development.js163051)
at mountIndeterminateComponent (react-dom.development.js200741)
at beginWork (react-dom.development.js215871)
at HTMLUnknownElement.callCallback (react-dom.development.js41641)
at Object.invokeGuardedCallbackDev (react-dom.development.js42131)
at invokeGuardedCallback (react-dom.development.js42771)
at beginWork$1 (react-dom.development.js274511)
at performUnitOfWork (react-dom.development.js265571)
useState @ react.development.js:1622
E @ AuthProvider.tsx:31
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react.development.js:209 Warning: 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
error @ react.development.js:183
resolveDispatcher @ react.development.js:1592
useState @ react.development.js:1621
E @ AuthProvider.tsx:31
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react.development.js:209 Warning: 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
error @ react.development.js:183
resolveDispatcher @ react.development.js:1592
useState @ react.development.js:1621
E @ AuthProvider.tsx:31
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react.development.js:1622 Uncaught TypeError: Cannot read properties of null (reading 'useState')
at useState (react.development.js16221)
at E (AuthProvider.tsx311)
at renderWithHooks (react-dom.development.js163051)
at mountIndeterminateComponent (react-dom.development.js200741)
at beginWork (react-dom.development.js215871)
at HTMLUnknownElement.callCallback (react-dom.development.js41641)
at Object.invokeGuardedCallbackDev (react-dom.development.js42131)
at invokeGuardedCallback (react-dom.development.js42771)
at beginWork$1 (react-dom.development.js274511)
at performUnitOfWork (react-dom.development.js265571)
useState @ react.development.js:1622
E @ AuthProvider.tsx:31
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:18687 The above error occurred in the <E> component:
at E (http://localhost:3000/static/js/bundle.js:141201:16)
at div
at AppRoot
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.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25892
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react.development.js:1622 Uncaught TypeError: Cannot read properties of null (reading 'useState')
at useState (react.development.js16221)
at E (AuthProvider.tsx311)
at renderWithHooks (react-dom.development.js163051)
at mountIndeterminateComponent (react-dom.development.js200741)
at beginWork (react-dom.development.js215871)
at beginWork$1 (react-dom.development.js274261)
at performUnitOfWork (react-dom.development.js265571)
at workLoopSync (react-dom.development.js264661)
at renderRootSync (react-dom.development.js264341)
at recoverFromConcurrentError (react-dom.development.js258501)
useState @ react.development.js:1622
E @ AuthProvider.tsx:31
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
numerous-continent-44612
07/04/2023, 7:54 PM@great-diamond-35515 Do you want me to share something else?
g
great-diamond-35515
07/04/2023, 8:02 PMIt seem like something is not matching with the react version that is used and hooks
Please try the following;
1. remove Descope usage- see it is working
2. Add a useState use in the App component- does it work?
Also
If this is an open source- feel free to share the repo
n
numerous-continent-44612
07/04/2023, 8:04 PMthanks Asaf!
1. I did. and it works well
2. how?
3. it's not open source unfortunately 🙂
g
great-diamond-35515
07/04/2023, 8:10 PMJust add a line
const [loading, setLoading] = useState(false)
(in the beginning of the App component )
great-diamond-35515
07/04/2023, 8:12 PMuseState should be imported from React package
n
numerous-continent-44612
07/05/2023, 7:02 AM@great-diamond-35515 I tried. didnt solve the problem
g
great-diamond-35515
07/05/2023, 7:11 AMbut did it work with the useState call?
n
numerous-continent-44612
07/05/2023, 7:23 AMBTW, I found that those lines cause most of the errors:
const { isAuthenticated, isSessionLoading } = useSession()
const { user, isUserLoading } = useUser()
numerous-continent-44612
07/05/2023, 7:23 AMIm not sure that I understand wha you mean by "work with the useState call"
g
great-diamond-35515
07/05/2023, 7:24 AMWhat I suggest is to have a short call when everything works without Descope, lets see how we can add it step by step and see where the issue is
n
numerous-continent-44612
07/05/2023, 7:35 AMWe can have it now. everything woeks witouy Descope usage
✅ 1