Closed glortho closed 7 years ago
Are you using react and auth0-lock from a CDN?
Sorry @luisrudge I updated my specs. We're just using bundled React and auth0-lock.
We have this issue as well on IE 11
@Serfenia same config (using a bundler like webpack)?
Hello @luisrudge Yes I am using webpack as bundler.
Hi @Serfenia and @glortho. I just created a simple create-react-app
project and added lock. It works with IE11 without any issues. Can you please share your Lock options and which social connections are you using? If you can create a repro project it would be great as well!
componentDidMount() {
const cid = "FUshIKv4fCTzWUs9EgF9kPJ8etf9yImk";
const domain = "luisrudge-auth0.auth0.com";
var lock = new Auth0Lock(cid, domain);
lock.show();
}
Okay thanks for this @luisrudge . I'll see about getting a repo set up. In the meantime, github is the only auth/provider option we have enabled and these are the lock options we're using:
auth: {
params: {
scope: "openid nickname picture blog bio company email location name"
state: "/"
},
redirectUrl: "http://localhost:3000/callback"
}
Note: We also have auth0-lock in a separate vendor bundle from our main app code, along with all other node_modules, using webpack 2's code splitting.
@glortho how are you calling lock.show?
@luisrudge we're calling it like so:
const lock = new Auth0Lock( clientId, domain, options );
lock.show();
We're using Google as an option to login.
this.lock = new Auth0Lock(secret, url, {
theme: {
logo: '/logo.png'
},
disableSignupAction: true,
rememberLastLogin: true,
languageDictionary: {
title: 'Authenticate'
},
auth: {
redirect: false
},
allowedConnections: ['Username-Password-Authentication', 'google-oauth2']
});
// Showing
this.lock.show();
We're using it in combination with:
@luisrudge fwiw i can't seem to reproduce this in a barebones repo. but why might it be that something else in my environment is causing what appears to be an immutable.js list to get passed in as children
of SocialButtonsPane
? maybe there's a bad version of something stuck somewhere? i'll try to blow my whole app away and start from scratch with new dependencies.
No luck blowing everything away and re-installing. More information @luisrudge :
Our app is isomorphic and even though auth0-lock does not get invoked server-side it is required there. It seems like there may be some possibility that this is the culprit since if I use auth0-lock in a different part of our app that isn't isomorphic it seems to work. @Serfenia is your app isomorphic?
We use https://github.com/lerna/lerna with hoisting to manage our repo.
Actually the isomorphic thing may be a red herring, because in the case of it working in a different part of the app, there is nothing else in the bundle and we pass in a container
option for it to render off of. I'll try splitting auth0 out into its own bundle and see if that works for the isomorphic app.
Update: No luck splitting it out into its own bundle. Update2: No luck trying to use a CDN version of React.
cool @glortho. Let me know if you can build a repro project so I can help you. @Serfenia does your stack look like @glortho's?
Thanks @luisrudge I haven't been able to reproduce with a simple repo. There must be something else conflicting in our rather large dependency stack.
@Update: Specifying auth0-lock, react, react-dom, and transition groups as externals in webpack and then including react-with-addons via cdn (https://unpkg.com/react@15/dist/react-with-addons.js https://unpkg.com/react@15/dist/react-dom.js ) + auth0 via cdn (https://cdn.auth0.com/js/lock/10.13.0/lock.min.js) appears to have worked!
If you're still having problems @Serfenia give that a try and let me know if it works for you.
Here is the relevant part of my webpack config:
externals: {
'auth0-lock': 'Auth0Lock',
react: 'React',
'react-dom': 'ReactDOM',
'react/lib/ReactTransitionGroup': 'React.addons.TransitionGroup',
'react/lib/ReactCSSTransitionGroup': 'React.addons.CSSTransitionGroup'
}
We're against using CDN's as resource. We only use npm
packages.
About the stack, we include the following packages related to Auth0 and React (according to our package.json
):
"auth0-lock": "^10.7.2",
"react": "~15.4.1",
"react-addons-update": "~15.4.1",
"react-dom": "~15.4.1",
"react-redux": "^4.4.5",
"react-router": "^3.0.0",
"react-router-redux": "^4.0.5",
"react-tap-event-plugin": "^2.0.1",
"react-tooltip": "^3.2.2",
Yeah, using the CDN will be bad for you two because we ship react+react-dom in the CDN file, so you're loading things unnecessarily.
@Serfenia did you try to update your autho-lock package?
Yes definitely not ideal! We have a delivery this week where being able to login on IE11 takes priority over heavy payload, but after that it'd be good to revisit and see if we can figure out what's happening.
On Wed, Mar 15, 2017 at 8:11 AM -0600, "Luís Rudge" notifications@github.com wrote:
Yeah, using the CDN will be bad for you two because we ship react+react-dom in the CDN file, so you're loading things unnecessarily.
@Serfenia did you try to update your autho-lock package?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.
NPM follows the semver protocol so a caret (^) will install the latest minor version. Since there is no major version higher than 10 yet it installs the latest version at the moment. Proof:
├─┬ auth0-lock@10.13.0
│ ├─┬ auth0-js@8.4.0
│ │ ├── base64-js@1.2.0
│ │ └── winchan@0.2.0
│ ├── blueimp-md5@2.3.1
│ ├─┬ fbjs@0.3.2
│ │ ├── core-js@1.2.7
│ │ ├── ua-parser-js@0.7.12
│ │ └── whatwg-fetch@0.9.0
│ ├─┬ idtoken-verifier@1.0.1
│ │ ├── crypto-js@3.1.9-1
│ │ └── jsbn@0.1.1
│ ├── immutable@3.8.1
│ ├── jsonp@0.2.1
│ ├── password-sheriff@1.1.0
│ ├─┬ react-addons-css-transition-group@15.4.2
│ │ └─┬ fbjs@0.8.9
│ │ └── core-js@1.2.7
│ ├─┬ superagent@3.5.0
│ │ ├── cookiejar@2.1.0
│ │ ├── extend@3.0.0
│ │ ├─┬ form-data@2.1.2
│ │ │ └── asynckit@0.4.0
│ │ ├── formidable@1.1.1
│ │ └─┬ readable-stream@2.2.5
│ │ ├── buffer-shims@1.0.0
│ │ ├── core-util-is@1.0.2
│ │ ├── process-nextick-args@1.0.7
│ │ └── util-deprecate@1.0.2
│ ├── trim@0.0.1
│ └── url-join@1.1.0
@Serfenia yeah.. my question was if you had tried with that (removing the node_Modules and installing again)
Yes I did. Did not fix the issue unfortunately. My question is: how can the CDN resource differ from the NPM package?
It doesn't differ. The thing is that the CDN has everything needed inside that file. When you install with NPM, it gets bundled with your application, using the packages you're also using.
Are you doing server side rendering as well?
No we're not doing any server side rendering. Just static file serving to serve the index html file.
@glortho so.. SSR is not the issue. @Serfenia and @glortho can you share your full package.json file? I will create a project that uses all the packages you have in common and try to reproduce the issue.
@luisrudge we have some private dependencies that you won't be able to install, but here are the public ones:
"dependencies": {
"agenda": "^0.8.0",
"archiver": "^0.14.3",
"async": "^0.9.2",
"autobahn": "0.x",
"autobind-decorator": "1.x",
"autolinker": "1.x",
"babel-polyfill": "6.x",
"babel-preset-es2015-ie": "6.x",
"babel-regenerator-runtime": "6.x",
"body-parser": "^1.15.0",
"chalk": "^1.1.3",
"classnames": "2.x",
"codemirror": "5.x",
"compression": "^1.6.1",
"connect": "^3.3.5",
"connect-flash": "^0.1.1",
"cookie-parser": "^1.4.0",
"core-js": "^2.2.2",
"css-loader": "0.x",
"csv-stringify": "0.0.8",
"d3-scale": "^1.0.4",
"dockerode": "~2.0.3",
"dom-helpers": "glortho/dom-helpers",
"event-stream": "^3.3.2",
"express": "4.x",
"extract-text-webpack-plugin": "^2.0.0-rc.3",
"findit": "^2.0.0",
"form-data": "^0.2.0",
"fs-extra": "2.x",
"geojson-vt": "^2.4.0",
"github": "^2.3.0",
"handlebars": "4.x",
"http-proxy": "1.x",
"install": "^0.7.3",
"isomorphic-fetch": "^2.2.1",
"jade": "^1.7.0",
"js-yaml": "^3.0.2",
"jsts": "^1.3.0",
"juno-notebook-controls": "*",
"leaflet": "1.x",
"leaflet-draw": "0.x",
"less-loader": "^2.2.3",
"lodash": "4.x",
"marked": "0.x",
"method-override": "2.x",
"mongoosastic": "4.x",
"mongoose": "4.x",
"mongoose-crate": "^1.0.10",
"mongoose-crate-imagemagick": "^1.0.3",
"mongoose-crate-localfs": "^1.1.1",
"morgan": "1.x",
"multer": "1.x",
"node-uuid": "^1.4.1",
"normalize-path": "^1.0.0",
"npm": "^3.8.9",
"oboe": "^2.1.2",
"passport": "^0.3.2",
"passport-github": "^1.1.0",
"react": "15.x",
"react-bootstrap": "^0.30.3",
"react-dom": "15.x",
"react-keydown": "1.x",
"react-leaflet": "1.x",
"react-overlays": "^0.6.10",
"react-router": "2.x",
"react-skylight": "0.x",
"react-tabs": "^0.8.2",
"react-tagsinput": "^3.6.0",
"relative-date": "^1.1.3",
"request": "2.x",
"slice-file": "^1.0.0",
"socket.io": "^1.3.7",
"socket.io-client": "^1.3.7",
"socket.io-stream": "^0.9.0",
"static-expiry": "0.0.11",
"style-loader": "0.13.x",
"terminal.js": "glortho/terminal.js",
"touch": "0.0.3",
"unzip2": "^0.2.5",
"webpack": "2.2.0",
"webshot": "^0.16.0",
"when": "^3.4.2",
"ws": "^0.8.1"
},
"devDependencies": {
"aliasify": "^1.7.2",
"autoprefixer-core": "^5.1.7",
"babel-cli": "6.x",
"babel-core": "6.x",
"babel-plugin-add-module-exports": "0.x",
"babel-plugin-transform-decorators-legacy": "1.x",
"babel-plugin-transform-flow-strip-types": "6.x",
"babel-plugin-transform-react-constant-elements": ">=6.4.0",
"babel-plugin-transform-react-inline-elements": ">=6.4.0",
"babel-plugin-transform-regenerator": "6.x",
"babel-polyfill": "6.x",
"babel-preset-es2015": "6.x",
"babel-preset-es2015-ie": "6.x",
"babel-preset-react": "6.x",
"babel-preset-stage-1": "6.x",
"babelify": ">=7.2.0",
"browserify": "^12.0.1",
"del": "~0.1.3",
"elasticsearch": "^10.1.3",
"envify": "~1.2.0",
"enzyme": "2.x",
"exorcist": "^0.4.0",
"file-loader": "^0.9.0",
"flow-bin": "0.x",
"glob": "^6.0.1",
"jest-cli": "^0.5.2",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"minimist": "^1.2.0",
"mock-res": "^0.3.0",
"node-uuid": "^1.4.7",
"nodemon": "1.x",
"proxyquire": "^1.7.3",
"pump": "^1.0.1",
"react-addons-test-utils": "15.x",
"react-hot-loader": "^3.0.0-beta.6",
"reactify": "^0.15.2",
"run-sequence": "^1.0.2",
"sinon": "^1.17.2",
"sinon-stub-promise": "^2.0.0",
"source-map-support": "^0.4.0",
"tap-difflet": "^0.4.0",
"tap-dot": "glortho/tap-dot",
"tape": "^4.4.0",
"tape-catch": "^1.0.4",
"url-loader": "^0.5.7",
"webpack-dev-server": "2.x"
}
and here are the dependencies for our other app with auth0-lock bundled that does work (with container
option):
"dependencies": {
"@mapbox/geojson-area": "^0.2.2",
"@turf/intersect": "^3.0.12",
"alphaify": "^3.0.0",
"autobahn": "0.x",
"autobind-decorator": "1.x",
"autolinker": "1.x",
"aws-sdk": "^2.4.0",
"babel-cli": "6.x",
"babel-loader": "6.x",
"babel-plugin-add-module-exports": "0.x",
"babel-plugin-transform-decorators-legacy": "1.x",
"babel-plugin-transform-flow-strip-types": "6.x",
"babel-polyfill": "6.x",
"babel-preset-es2015": "6.x",
"babel-preset-react": "6.x",
"babel-preset-stage-1": "6.x",
"babel-regenerator-runtime": "6.x",
"chalk": "^1.1.3",
"classnames": "2.x",
"copy-to-clipboard": "^3.0.2",
"css-loader": "0.x",
"d3-scale": "^1.0.4",
"express": "4.x",
"file-loader": "^0.9.0",
"flux": "^2.1.1",
"fs-extra": "2.x",
"geojson-vt": "^2.4.0",
"handlebars": "4.x",
"http-proxy": "1.x",
"isomorphic-fetch": "^2.2.1",
"jsonwebtoken": "^7.1.9",
"juno-notebook-controls": "*",
"jupyter-react-js": ">=0.2.0",
"leaflet": "1.x",
"leaflet-draw": "0.x",
"loader-runner": "^2.2.0",
"lodash": "4.x",
"marked": "0.x",
"method-override": "2.x",
"moment": "^2.13.0",
"mongoosastic": "4.x",
"mongoose": "4.x",
"morgan": "1.x",
"multer": "1.x",
"pug": "^2.0.0-beta2",
"rc-slider": "^6.1.0",
"react": "15.x",
"react-addons-shallow-compare": "15.x",
"react-datepicker": "^0.29.0",
"react-dom": "15.x",
"react-keydown": "1.x",
"react-leaflet": "1.x",
"react-leaflet-draw": "0.x",
"react-overlays": "^0.6.10",
"react-router": "2.x",
"react-select": "^1.0.0-rc.2",
"react-skylight": "0.x",
"react-sparklines": "^1.6.0",
"react-tabs": "^0.8.2",
"react-timbr-machine": "^0.1.3",
"relative-date": "^1.1.3",
"request": "2.x",
"static-expiry": "0.0.11",
"style-loader": "0.13.x",
"url-loader": "^0.5.7",
"webpack": "2.2.0",
"yargs-parser": "^4.2.1"
},
"devDependencies": {
"autoprefixer": "6.x",
"babel-core": "6.x",
"babel-plugin-add-module-exports": "0.x",
"babel-plugin-transform-decorators-legacy": "1.x",
"babel-plugin-transform-regenerator": "6.x",
"babel-preset-es2015": ">=6.9.0",
"babel-preset-react": "6.x",
"babel-preset-stage-1": ">=6.5.0",
"eslint-import-resolver-webpack": "^0.8.1",
"extract-text-webpack-plugin": "^2.0.0-rc.3",
"flow-bin": "0.x",
"json-loader": "^0.5.4",
"nodemon": "1.x",
"postcss-import": "9.x",
"postcss-loader": "1.x",
"postcss-modules-values": "^1.2.2",
"postcss-nested": "^1.0.0",
"react-hot-loader": "^3.0.0-beta.6",
"stacktrace-js": "^1.3.1",
"webpack-dev-server": "2.x"
}
@glortho yeah.. that's huge! haha. This looks like an integration issue with another package or packages. I can help you debug this if you can provide me a repro project. Sadly, with the information we have now it's impossible to figure it out the issue. Please reopen the issue if you have time to create a repro project. Thanks for the help!
After invoking the auth0-lock widget in our app, it starts to come forward but then hangs on the loading indicator. In the console: "Objects are not valid as a React child (found: List [ [object Object] ]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of 'SocialButtonsPane'."
See here:
This is with lock version 10.12.3, on IE 11, Win 7 (virtual), React 15.3.2.
Note that these same specs all work as expected in Chrome.
Let me know what other info I can provide!