Using auth0-lock with React 16 #1096
Comments
|
We're not adding alpha/beta releases to our dependencies. We'll test lock with react 16 with it comes out officially. |
|
@landitus React v16 (and v15.6.2) has landed The annoying bit about forcing a specific version is in the case of a project that is using a newer version of React than Lock. Lock basically takes your app's React version hostage. A smaller dependency would be easy to work around but React versions can't be juggled within the same app. |
|
@tim-soft have you tested with react16? since we do accept v16, you shouldn't be getting two versions of react. |
|
I am about to do some testing with v16, that rant was more about unsupported releases such as the last few v16 betas/release candidates |
|
I just upgraded to v16 and I am getting this error in the production build only:
|
|
Do you have a stacktrace? |
|
@luisrudge yes sir!
|
|
ah, damn. only in production doesn't make a lot of sense for stacktraces haha. can you make this happen in dev mode? |
|
@luisrudge I've tried, can't reproduce in dev-mode. However I can tell you that the component it seems to be complaing about is the one that uses I have also checked the paths of the React version that is being called, which is the one at the root of my node_modules, so it's not like there are multiple copies of React. |
|
Alright, thanks. We use a few "ref" calls: I'm finishing a major feature in another library and I'll be able to take a look on this on monday. If you can figure it out what's going on until then, I can cut a new release with the fix. Sorry I can't help you right away. |
|
Yes that's quite a few ref calls, but the error explicitly states |
|
When do you get the error? After you click something? |
|
Immediately when I invoke |
|
After I upgrade to react@16 in this repo, I get an error after I click the signup button. but |
|
No, here are my Lock opts if it helps: |
|
ok thanks! I'll look into it. |
|
@luisrudge have you had a chance to look into it? I tried to pull the source and get it building with React 16 but no luck. |
|
Hi @jeffijoe. Still haven't found the time. Probably today or tomorrow. 🎉 |
|
We're also having an issue using Lock with React 16, specifically using the sign up portion of the pop-up. Stack-Trace: Looks like a ref that's being used isn't actually being defined. Was able to recreate using basic create-react-app configuration. |
|
@mattStegall I'm fixing this right now. I'll publish a new version today. |
|
Hi @mattStegall, @jeffijoe, @tim-soft and @mdimovska. We plan to release a new version next week, after some testing. 🎉 |
|
@luisrudge Tried with yarn, getting You can try to release with a dist-tag? |
|
@jeffijoe ahhh.. that's true. we don't publish the dist files in the repo. Can you clone that branch and use yarn link? That would be the best. |
|
@luisrudge Cloned the repo and used your branch through yarn link and it works. 👍 |
|
@luisrudge did the same, however I wasn't as lucky as @mattStegall — I get the same error as before. 😢 |
|
@jeffijoe this one? #1096 (comment) |
|
Well obviously I can't reproduce it in a clean repo, that would be too easy then wouldn't it? 😉 Unable to reproduce in a clean The super odd part is that it's only an issue in production. 😢 |
|
do you use CRA in this app? |
|
Not in my real app, no. |
|
I just removed |
|
I'll try it out right away — do I need to rerun |
|
I honestly don't know. Maybe it's best to unlink then link again? :> |
|
Been trying for 40 minutes now to get the yarn-linked package running in our staging environment, but every time I check the code with the container ref is still there. But when I run it locally, it works. There's no way for me to verify this 100% unless I get a way to |
|
So, locally with your codebase it works, right? |
|
Yes — going to try with the |
|
|
|
Correct — but it will tell me if |
|
@jeffijoe Changes are now on master. Maybe it's easier for you to test this way? |
|
willl that lead to a package publish? |
|
We'll publish a packge shortly. I'm merging a few more PRs before that. |
|
@luisrudge silly me, I used |
|
Also, this still only occurs when using the production-build of React. If I manually UglifyJS the development build, it works fine. |
|
So, chances are there's something wrong with your build process, right? Because CRA's build process works just fine. |
|
Mine isn't much different; I'll try to experiment with build config. |
|
@luisrudge HURRAY!! I finally figured it out! Posting here to help other lost souls. I tried to reproduce with a simple After removing the following 2 settings from Remove those from your config and everything should work. Hope that fixes your issue as well! |
|
nice @jeffijoe! |
|
@jeffijoe & @luisrudge can you link to that React 16 workaround? I forked auth0/lock and did a quick upgrade to react16 (https://github.com/imitadvisory/lock.git#react_v16_dist - using yarn so just committed a pre-built version to get moving) however I still get that annoying ref error referencing Cheers, |
|
@bryanvaz the issue only occured in prod, so it was my app-specific uglifyjs settings I changed. |
|
@jeffijoe How are you calling I'm trying to build it up piece by piece so I'm just calling it from a function right below it, and it's whining about not having an owner: const Login = (props) => {
props.doAuthentication();
return (
<div>
<h1>
Login Area
</h1>
<ul>
<li>AUTH0_CLIENT_ID: <b>{AUTH0_CLIENT_ID}</b></li>
<li>AUTH0_DOMAIN: <b>{AUTH0_DOMAIN}</b></li>
<li>Current Error: {props.error} </li>
</ul>
<div>
<ul className="list-inline">
<li><button className="btn btn-primary" onClick={onLoginClick} >Login</button></li>
</ul>
</div>
<div id="auth-root" />
</div>
);
};
const onLoginClick = () => {
lock.show();
};@luisrudge there was some talk about adjusting the code to remove the |
|
Not sure what your I use |
|
@jeffijoe it's just a ghetto check to see if the user is was authenticated (sidestepping a callback page for now since it's a hardcore SPA - no backend at all). const doAuthentication = () => (dispatch) => {
// If the User is authenticated using lock...
lock.on('authenticated', (authResult) => {
// Load the User's profile from the idToken in Lock
console.log('User Authenticated!');
// Use the token in authResult to getUserInfo() and save it to localStorage
lock.getUserInfo(authResult.accessToken, (error, profile) => {
if (error) {
// Handle error
console.log(`Auth0 Error: ${error}`);
this.setState({ error });
return;
}
localStorage.setItem('accessToken', authResult.accessToken);
localStorage.setItem('profile', JSON.stringify(profile));
localStorage.setItem('id_token', authResult.idToken);
});
});
}; |
|
I'm having this same problem in a React 16 project - React complaining about adding a ref with no owner, likely due to the "2 copies of React" issue. I'm troubleshooting, and will share my solution here when I find one. 👍 |
|
Solved with Yarn resolutions: |
React 16 is already added to the dependencies in package.json.
Currently, the dependencies in auth0-lock are specified like this:
However there is not yet a release version of React 16, but only alpha and beta prereleases.
Since I am using React 16 alpha in the project, I get multiple installs of react:
The reason for this is that prereleases are not considered if not specified explicitly, they are excluded from the matching.
Is it possible to append ^16.0.0-alpha and/or ^16.0.0-beta to react and react-dom, since there isn't a release of React v16 at the moment?
The text was updated successfully, but these errors were encountered: