Lock: [Version 10] Invariant Violation with React and Webpack

[bbar]

My application is targeting react v15.0.1 and auth0-lock v10. Everything's being bundled together by Webpack.

import Auth0Lock from 'auth0-lock/lib/classic';
let lock = new Auth0Lock('id', 'domain');

lock.show() throws the following:

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

I haven't dug too far into this, but it seems that the version of react auth0-lock is targeting (0.14.5) is conflicting with the version my application is targeting (15.0.1). I've worked around this by adding the follwoing to my webpack.config.js file:

resolve: {
  alias: {
    "react": __dirname + '/node_modules/react',
  }
}

So now, instead of Webpack bundling 2 versions of React (the version auth0-lock is targeting and the version my application is targeting), it's only bundling the version my app is targeting, and it tells anything else that requires React to look no further than that version.

Although things are working fine right now, I can see problems creeping up in the future. Is anyone aware of a better way to do this using Webpack?

[gnandretta]

We have updated the React dependency and we are less strict about its version. Thanks.

[gilesbutler]

I still get this error on 10.3.0 - the only way to fix it was using @bbar's solution above

[thedaniel]

I still get this error on 10.7.3.

[RafaelCosman]

Still getting this on 10.14.0.

Seems like this is still an issue. @gnandretta can we reopen this?

[luisrudge]

how are you importing lock?

[RafaelCosman]

import Auth0Lock from 'auth0-lock'

I'm using TypeScript with ts-loader.

Thanks for your help @luisrudge

[luisrudge]

Can you provide a sample project?

[samcorcos]

@luisrudge I ran into the same issue. Here's a sample project using an ejected version of create-react-app:

https://github.com/samcorcos/auth0-invariant-violation

The only thing I changed was the place that React and ReactDOM are recognized. I'm no longer using the react package, but the CDN here and the webpack config here

Instructions

Add valid public keys here

$ yarn
$ npm start

Click on the button in the top right to log in.

The page won't responsively update on successful login (because I'm lazy), but you will see the error logged to the console and the login will fail.

Let me know if you need any more information.

Btw, it works with the non-CDN version of React.

[luisrudge]

@samcorcos it's because of the react-addons-css-transition-group package. It imports react/lib/ReactCSSTransitionGroup, so you have to alias that as well.

This might get fixed once we fix https://github.com/auth0/lock/issues/994