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?

5

Hi @JamesSeabrook-MRM,

Apologies for the very late reply.

Even if your project doesn’t use React, Auth0 Lock version 12 and newer are built internally using React. The error you are seeing comes from Lock’s own internal code. The most common cause for this is that Lock’s required react and react-dom libraries (which it needs to run) are not explicitly declared in your project’s package.json.

The recommended solution is to explicitly add react and react-dom to your project’s package.json. This ensures that your package manager (NPM) installs a single, correct version of these libraries that Lock can use.

If you have any further questions, feel free to reach out.

Have a good one,
Vlad