Auth0-lock breaks immediately when using Gatsby

[brm]

I’m having an issue using Auth0 Lock with Gatsby, where as soon as I try to lock.show() the initialised Lock, the entire app crashes.

The source of the error isn’t entirely clear. There are error messages backend.js:30 Uncaught TypeError: Cannot convert undefined or null to object at values (<anonymous>) at TransitionGroup.render (TransitionGroup.js:127), as well as a react-dom.development.js:422 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development.

I don’t believe the error is to do with my callback or web origin settings in my tenant. When I try to show the exact same Lock in a separate (non-Gatsby) React project, everything works as intended. However, even when I try to use Lock in a completely fresh Gatsby starter project, the same error occurs.

Has anyone had a similar experience? Could anyone provide some insight or advice on how to resolve this issue? Thanks!

[dan.woda]

Hi @brm,

I am not seeing this same/related error in any support cases.

Could you post some of the relevant code, or show us which tutorial or quickstart you used?

Thanks,
Dan

[brm]

Hi Dan,

I started a project using Gatsby’s default starter (GitHub - gatsbyjs/gatsby-starter-default: The default Gatsby starter), though I originally saw this error using another Gatsby starter so it doesn’t seem to be starter-specific.

I’ve made a minimal repo in which the issue occurs: GitHub - braden-m/gatsby-auth0-lock. The only change from the Gatsby default starter is to install auth0-lock, and to initialise them show a simple Lock.

Here’s the steps to reproduce the error:

1. yarn install --pure-lockfile (I’m on Yarn 1.17.3)
2. yarn run start
3. Launch localhost:9000
4. App immediately crashes (tested on both Chrome 78.0.3904.108 and Firefox 71.0)

I’ve managed to find a solution, shown here: Adding resolutions to fix react-transition-group issue by braden-m · Pull Request #1 · braden-m/gatsby-auth0-lock · GitHub. However, it’s a bit hacky, and not a great developer experience to have to dig around closed GitHub issues to find the few lines of code that (for some reason) resolve the issue!

Let me know what you think.

All the best,
Braden

[dan.woda]

Thanks for adding your solution to the conversation. I know we currently have this blog post as a resource, but it does not show an implementation with the lock library, and that seems to be causing the issue. It looks like the thread you mentioned is a fix, and hopefully this topic will provide some more reference to that in the future.

Thanks again!
Dan