React javascript errors within Auth0 code using Auth Lock

Get Help
,
1

I’ve recently upgraded from Auth-lock 11.27.0 to 13.0.0. I’ve double checked our implementation and made all the necessary configuration changes within the JS code. Its being used in a vanilla JS environment and is a really simple implementation.

const options = {
            avitarUrl: '', /* Was previously avitar: null*/
            container: this.containerId,
            allowSignUp: this.showSignUp,
            allowLogin: this.showLogin,
            auth: {
                redirect_uri: this.redirectUrl, /*Updated from redirectUrl*/
                state: this.destinationUrl /*Updated from params: { state: this.destinationUrl }*/
            },
            language: this.langCode,
            allowShowPassword: true,
            showTerms: true,
            mustAcceptTerms: true,
            additionalSignUpFields: [
                {
                    name: 'given_name',
                    placeholder: this.firstNameText,
                    storage: 'root'
                },
                {
                    name: 'family_name',
                    placeholder: this.lastNameText,
                    storage: 'root'
                },
                {
                    type: 'checkbox',
                    name: 'newsletter',
                    prefill: 'false',
                    placeholder: this.newsletterText
                },
                {
                    name: 'locale',
                    value: this.langCode,
                    placeholder: this.langCode,
                    type: 'hidden'
                },
                {
                    name: 'language_context',
                    value: this.langContext,
                    placeholder: this.langContext,
                    type: 'hidden'
                }
            ]
        };
this.lock = new Auth0Lock(this.authClientId, this.authDomain, options);
this.lock.show();

Its at the point of this.lock.show() that we get a string of javascript errors relating to errors in React code. I’ve tried a few things around changing versions but always returning to the same error.

This is all running on node version 20.17.0

Is there something I’m missing from the configuration?

This is the error list I’m getting:

Uncaught Error: Expected ref to be a function, an object returned by React.createRef(), or undefined/null.
    at markRef (vendors-node_modules…e.bundle.js:8862:17)
    at updateClassComponent (vendors-node_modules…me.bundle.js:9454:7)
    at beginWork (vendors-node_modules….bundle.js:10545:13)
    at runWithFiberInDEV (vendors-node_modules…e.bundle.js:1529:30)
    at performUnitOfWork (vendors-node_modules….bundle.js:15141:22)
    at workLoopSync (vendors-node_modules….bundle.js:14965:41)
    at renderRootSync (vendors-node_modules….bundle.js:14945:11)
    at performWorkOnRoot (vendors-node_modules….bundle.js:14471:44)
    at performWorkOnRootViaSchedulerTask (vendors-node_modules…e.bundle.js:16225:7)
    at MessagePort.performWorkUntilDeadline (vendors-node_modules….bundle.js:26834:48)```

Any help would be greatly appreciated.
3

Hi @JamesSeabrook-MRM

Welcome to the Auth0 Community!

Several things can cause the error you are experiencing, and it can be hard to pinpoint the exact cause.

I would advise you to make sure that you are using the latest versions of react and react-dom declared in package.json, or remove the node_modules mentioned and install them again. Otherwise, you can double-check if you do not have multiple package.json files and the one being installed is an older version than what you are supposed to be using.

If the issue persists after attempting the above, please open an issue on our React SDKs repository since this error seems related to React.

Have a good one,
Vlad

4

The project I am using this in does not use React. The project is a simple Vanilla JS application. Are you saying that I need to bundle React and React DOM into my code in order to enable auth-lock?