Lock: TransitionGroup Error with React/Gatsby

[mvbooth]

Description

Using the current Auth0-js and Auth0-Lock packages, I was receiving an error in TransitionGroup.js that's being used from the Auth0-Lock dependency: react-transition-group ("react-transition-group": "^2.2.1").

My app is built in React (16.8.6) with Gatsby (2.3.31).

I fixed the issue so I no longer have the exact line of code, but basically "this.state.children" did not exist so TransitionGroup.js would cause an error which prevented the entire page from rendering.

Environment

Please provide the following:

• Lock version: 11.16.2
• Browser version: Chrome 74.0.3729.169
• OS: Windows 10
• Additional extensions/libraries that might be affecting your instance:

Reproduction

As this is a project that can't be viewed by the public yet, I can't link to my repo, but I was able to fix the problem by removing the 'react-transition-group' from the Auth0 dependencies. I used the same method for fixing the errors between React versions from the Auth0 dependencies:

"resolutions": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-transition-group": "^4.1.1"
}

[luisrudge]

you removed it or upgraded it?

[mvbooth]

@luisrudge - so I added that resolution to my package.json file, then I installed the most recent transition group package as a dependency to my project.

I realize this might be quite a bit of an edge case for users with current versions of React/Gatsby.

If it helps, I can put together a repo that I can share publicly to give more specific details. I was hoping this log might help anyone in the future if they are trying to use Auth0 with React/Gatsby. I appreciate you previous work in getting React16 working with the resolutions!

[luisrudge]

Thanks! I'll close this but it's amazing that you added this info. It will certainly help future users that have the same issue. 🎉

[minaibrahimsaid]

i have the same problem but i can't solve it

[mvbooth]

@minaibrahimsaid - did you add those resolutions to your package.json file? You also need to install those packages manually (unless theyre in your dependencies). Also make sure your versions in resolutions match your versions in your own dependencies.

[minaibrahimsaid]

actually i did add the resolutions to my package.json and i matched the versions

[mvbooth]

actually i did add the resolutions to my package.json and i matched the versions

Ok, I'll try to help if I can, but you're going to need to be a lot more specific with what's in your code, or put it on codepen so I can see the actual code and packages being used. It's hard to troubleshoot without specifics. :)

[minaibrahimsaid]

i magically works 💃

[minaibrahimsaid]

i just remove node_nodules and run npm install again
thanks a lot you save my day :)

[mvbooth]

Glad it works! sometimes before I get too deep into fixes I'll just wipe out my node_modules and reinstall to make sure!

[minaibrahimsaid]

Glad it works! sometimes before I get too deep into fixes I'll just wipe out my node_modules and reinstall to make sure!

thanks a lot for your help <3

[demonmovch]

I have the same issue. I followed the instructions but that did not solve the issue. Can anybody help me? I have attached my package.json file. I also have attached package-lock.json just in case. Please let me know what else information you need.

files.zip

[mvbooth]

I have the same issue. I followed the instructions but that did not solve the issue. Can anybody help me? I have attached my package.json file. I also have attached package-lock.json just in case. Please let me know what else information you need.

files.zip

I'm unable to extract your package files from the zip - getting an unspecified error.

[GreenOn]

For NPM users having the same issue, please note that resolutions is not an NPM feature. You will have to use something like https://www.npmjs.com/package/npm-force-resolutions. We learned about this after spending hours :-(.

[GreenOn]

I tried the above solution adding resolutions along with the preinstall script from npm-force-resolutions.
Resolutions did the job.

However, gatsby develop gives me this error:

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App ....

Problem is React& React-Dom versions are applied to the entire package.json and not just to the Auth0, which is not good. Dear Auth0 team, please give us a solution for this. If you can update your package to the latest React versions which match the ones with Gatsby, I think the problem would be solved with no hacks.

[GreenOn]

An update to the above post... I went with the yarn route and got rid of all the problems I was having with npm.