Skip to content

Auth0-lock 14.2.4 Is not compatible with the React and React-dom 19.2.4 #2739

@Jami-Lu

Description

@Jami-Lu

Checklist

  • I have looked into the Readme and Examples, and have not found a suitable solution or answer.
  • I have searched the issues and have not found a suitable solution or answer.
  • I have searched the Auth0 Community forums and have not found a suitable solution or answer.
  • I agree to the terms within the Auth0 Code of Conduct.

Description

I get these errors in the console when using using the Auth0-lock API with the React 19. I tried this with the React 18 and it worked just fine.

chunk-TMM3WI36.js?v=29870e46:332 Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
    at mapIntoArray (chunk-TMM3WI36.js?v=29870e46:332:17)
    at Object.mapChildren [as map] (chunk-TMM3WI36.js?v=29870e46:341:9)
    at getChildMapping (chunk-CGKHAZPO.js?v=29870e46:854:41)
    at getInitialChildMapping (chunk-CGKHAZPO.js?v=29870e46:899:10)
    at getDerivedStateFromProps (chunk-CGKHAZPO.js?v=29870e46:1001:35)
    at applyDerivedStateFromProps (auth0-lock.js?v=f615941d:17106:30)
    at mountClassInstance (auth0-lock.js?v=f615941d:17464:13)
    at updateClassComponent (auth0-lock.js?v=f615941d:21174:13)
    at beginWork (auth0-lock.js?v=f615941d:22440:22)
    at HTMLUnknownElement.callCallback2 (auth0-lock.js?v=f615941d:10174:22)
mapIntoArray @ chunk-TMM3WI36.js?v=29870e46:332
mapChildren @ chunk-TMM3WI36.js?v=29870e46:341
getChildMapping @ chunk-CGKHAZPO.js?v=29870e46:854
getInitialChildMapping @ chunk-CGKHAZPO.js?v=29870e46:899
getDerivedStateFromProps @ chunk-CGKHAZPO.js?v=29870e46:1001
applyDerivedStateFromProps @ auth0-lock.js?v=f615941d:17106
mountClassInstance @ auth0-lock.js?v=f615941d:17464
updateClassComponent @ auth0-lock.js?v=f615941d:21174
beginWork @ auth0-lock.js?v=f615941d:22440
callCallback2 @ auth0-lock.js?v=f615941d:10174
invokeGuardedCallbackDev @ auth0-lock.js?v=f615941d:10199
invokeGuardedCallback @ auth0-lock.js?v=f615941d:10233
beginWork$1 @ auth0-lock.js?v=f615941d:26280
performUnitOfWork @ auth0-lock.js?v=f615941d:25713
workLoopSync @ auth0-lock.js?v=f615941d:25652
renderRootSync @ auth0-lock.js?v=f615941d:25631
performConcurrentWorkOnRoot @ auth0-lock.js?v=f615941d:25190
workLoop @ auth0-lock.js?v=f615941d:6691
flushWork @ auth0-lock.js?v=f615941d:6670
performWorkUntilDeadline @ auth0-lock.js?v=f615941d:6878Understand this error
chunk-TMM3WI36.js?v=29870e46:332 Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
    at mapIntoArray (chunk-TMM3WI36.js?v=29870e46:332:17)
    at Object.mapChildren [as map] (chunk-TMM3WI36.js?v=29870e46:341:9)
    at getChildMapping (chunk-CGKHAZPO.js?v=29870e46:854:41)
    at getInitialChildMapping (chunk-CGKHAZPO.js?v=29870e46:899:10)
    at getDerivedStateFromProps (chunk-CGKHAZPO.js?v=29870e46:1001:35)
    at applyDerivedStateFromProps (auth0-lock.js?v=f615941d:17106:30)
    at mountClassInstance (auth0-lock.js?v=f615941d:17464:13)
    at updateClassComponent (auth0-lock.js?v=f615941d:21174:13)
    at beginWork (auth0-lock.js?v=f615941d:22440:22)
    at HTMLUnknownElement.callCallback2 (auth0-lock.js?v=f615941d:10174:22)
mapIntoArray @ chunk-TMM3WI36.js?v=29870e46:332
mapChildren @ chunk-TMM3WI36.js?v=29870e46:341
getChildMapping @ chunk-CGKHAZPO.js?v=29870e46:854
getInitialChildMapping @ chunk-CGKHAZPO.js?v=29870e46:899
getDerivedStateFromProps @ chunk-CGKHAZPO.js?v=29870e46:1001
applyDerivedStateFromProps @ auth0-lock.js?v=f615941d:17106
mountClassInstance @ auth0-lock.js?v=f615941d:17464
updateClassComponent @ auth0-lock.js?v=f615941d:21174
beginWork @ auth0-lock.js?v=f615941d:22440
callCallback2 @ auth0-lock.js?v=f615941d:10174
invokeGuardedCallbackDev @ auth0-lock.js?v=f615941d:10199
invokeGuardedCallback @ auth0-lock.js?v=f615941d:10233
beginWork$1 @ auth0-lock.js?v=f615941d:26280
performUnitOfWork @ auth0-lock.js?v=f615941d:25713
workLoopSync @ auth0-lock.js?v=f615941d:25652
renderRootSync @ auth0-lock.js?v=f615941d:25631
recoverFromConcurrentError @ auth0-lock.js?v=f615941d:25248
performConcurrentWorkOnRoot @ auth0-lock.js?v=f615941d:25196
workLoop @ auth0-lock.js?v=f615941d:6691
flushWork @ auth0-lock.js?v=f615941d:6670
performWorkUntilDeadline @ auth0-lock.js?v=f615941d:6878Understand this error
auth0-lock.js?v=f615941d:20558 The above error occurred in the <TransitionGroup2> component:

    at TransitionGroup2 (http://localhost:3000/node_modules/.vite/deps/chunk-CGKHAZPO.js?v=29870e46:975:34)
    at div
    at div
    at div
    at div
    at Chrome2 (http://localhost:3000/node_modules/.vite/deps/auth0-lock.js?v=f615941d:53545:9)
    at div
    at form
    at div
    at div
    at Container2 (http://localhost:3000/node_modules/.vite/deps/auth0-lock.js?v=f615941d:54020:9)

Not sure if this react-transition-group issue is the culprit for this reactjs/react-transition-group#918

Reproduction

  1. Install auth-lock 14.2.4
  2. Install react, react-dom 19.2.4
  3. Configure auth-lock as in the example like so
const lock = new Auth0Lock(...);
lock.show();

Additional context

No response

Lock version

14.2.4

Which browsers have you tested in?

Chrome

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugThis points to a verified bug in the code

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions