search

auth0 / lock

Auth0's signin solution
https://auth0.com/docs/libraries/lock
Other
1.13k stars 556 forks source link

TransitionGroup Error with React/Gatsby #1673

Closed mvbooth closed 5 years ago

mvbooth commented 5 years ago

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:

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 commented 5 years ago

you removed it or upgraded it?

mvbooth commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

mvbooth commented 5 years ago

@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 commented 5 years ago

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

mvbooth commented 5 years ago

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 commented 5 years ago

i magically works 💃

minaibrahimsaid commented 5 years ago

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

mvbooth commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

lucasdellabella commented 3 years ago

@luisrudge I'm still having this issue in 2021 - is there a reason we can't bump this dependency? The breaking releases seem like they shouldn't be much of an issue, but can't say with certainty otherwise I'd make the PR.

https://github.com/reactjs/react-transition-group/releases/tag/v3.0.0 https://github.com/reactjs/react-transition-group/releases/tag/v4.0.0