Auth0.js: Upgrading to 9.7.2 causes test breakages

Created on 16 Jul 2018 · 21Comments · Source: auth0/auth0.js

I upgraded from auth0-js 9.5.1 to ^9.7.2 and am now seeing the following error when running my jest tests:

/Users/[my-user]/[my-repo]/node_modules/auth0-js/src/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Authentication from './authentication'

Source

murtyjones

Most helpful comment

Thanks! That's very helpful. I'll dig through this today and I hope to have a patch by tomorrow.

luisrudge on 17 Jul 2018

❤3 🎉3 👍3

All 21 comments

What's the error? I think your string was trimmed.

luisrudge on 16 Jul 2018

My bad:

/Users/.../.../node_modules/auth0-js/src/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Authentication from './authentication';
                                                                                             ^^^^^^

SyntaxError: Unexpected token import

murtyjones on 16 Jul 2018

From what I can see, it appears that your code is:

not using our bundled version (which is referenced here: https://github.com/auth0/auth0.js/blob/master/package.json#L8)
not transpiling ES Modules (import/export) to commonjs modules (require/module.exports)

Either one of the two will fix this

luisrudge on 16 Jul 2018

OK. I added this to my jest config:

"transformIgnorePatterns": [
  "/node_modules/(?!auth0-js).+\\.js$"
]

Which fixed it.

Out curiosity, how would I use the bundled version with React?

murtyjones on 17 Jul 2018

9.7.0 should've been a major version bump, as any application participating in SSR is now broken.
Alternatively, you should retain backwards compatibility by shipping both CommonJs and ESM versions of Auth0.

I just got bit by this in a Next.js application.

Timer on 17 Jul 2018

👍4

@Timer It wasn’t our intention to break apps and I want to fix this in a patch release if we did that. I’ll recreate this scenario tomorrow to make sure it still works. My understanding of this is that apps would get the “browser“ npm entry and would all work out. But, as you pointed out, maybe not all apps are doing that. Just so you can help me testing that: does this issue happen on a brand new next js app + auth0js?

luisrudge on 17 Jul 2018

Great to hear, @lucascrespo! Looking forward to a fix. 😄

Apps will look at the main field when running via Node (SSR, or tests -- like this issue) and the browser or module field when being consumed by webpack (normal bundle application).

General rule of thumb is as follows:

esnext: uncompiled sources, what main is currently set to
browser: compiled down to minimum supported browser version (and no ES Modules)
module: compiled down to minimum supported browser version, except that ES Modules remain in place
main: compiled down to minimum supported Node version

Most people opt for module and main, there's not much value in shipping browser nor esnext.

Here's a really simple repro case:

$ npx create-next-app example
$ cd example/
$ yarn add auth0-js
$ echo "import Auth0 from 'auth0-js'

export default () => <div />
" > pages/index.js
$ yarn dev
$
$ # new terminal
$
$ curl -s http://localhost:3000 | head -n5 | tail -n4
(function (exports, require, module, __filename, __dirname) { import Authentication from &#x27;./authentication&#x27;;                                                              ^^^^^^
SyntaxError: Unexpected token import
$ yarn add [email protected]
$ curl -s http://localhost:3000 | head -n1
<!DOCTYPE html><html><head><meta charSet="utf-8" class="next-head"/><link rel="preload" href="/_next/-/page/index.js" as="script"/><link rel="preload" href="/_next/-/page/_app.js" as="script"/><link rel="preloa
d" href="/_next/-/page/_error.js" as="script"/><link rel="preload" href="/_next/static/commons/manifest.js" as="script"/><link rel="preload" href="/_next/static/commons/main.js" as="script"/></head><body><div i
d="__next"><div></div></div><div id="__next-error"></div><script>

Timer on 17 Jul 2018

👍1

Thanks! That's very helpful. I'll dig through this today and I hope to have a patch by tomorrow.

luisrudge on 17 Jul 2018

❤3 🎉3 👍3

Hey folks! With your help, I think I fixed this. Can you help me confirm that the beta version works for you?

$ npx create-next-app example
$ cd example/
$ yarn add [email protected]
$ echo "import React from 'react'
import auth0 from 'auth0-js'

export default class App extends React.Component {
  componentDidMount() {
    var webAuth = new auth0.WebAuth({
      domain: 'brucke.auth0.com',
      redirectUri: window.location.origin,
      clientID: 'k5u3o2fiAA8XweXEEX604KCwCjzjtMU6',
      responseType: 'token'
    })
    webAuth.authorize()
  }
  render() {
    return <div />
  }
}
" > pages/index.js
$ yarn dev

luisrudge on 18 Jul 2018

@Timer @murtyjones

luisrudge on 18 Jul 2018

Confirmed, my previously broken tests are now passing on 9.7.3^beta1.

@luisrudge Thank you for fixing!

murtyjones on 19 Jul 2018

Ok thanks @murtyjones. Let's wait for @Timer and then I'll release 9.7.3

luisrudge on 19 Jul 2018

Hey @luisrudge! Just saw this notification, I can check within the next 8 hours if you want to wait for my LGTM. Looking at Unpkg though, this looks good!

Timer on 19 Jul 2018

ok thanks @Timer

luisrudge on 20 Jul 2018

Yup, my app is working again! Thanks @luisrudge.

Timer on 20 Jul 2018

On a side note, I'm now seeing this in my console during SSR:

Using browser-only version of superagent in non-browser environment

Joes-MacBook-Pro:sprout-web joe$ yarn why superagent
yarn why v1.7.0
[1/4] 🤔  Why do we have the module "superagent"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "auth0-js" depends on it
   - Hoisted from "auth0-js#superagent"
   - Hoisted from "auth0-js#idtoken-verifier#superagent"
info Disk size without dependencies: "364MB"
info Disk size with unique dependencies: "888MB"
info Disk size with transitive dependencies: "1.25GB"
info Number of shared dependencies: 18
✨  Done in 0.72s.

Timer on 20 Jul 2018

@Timer I think you'd get the same warning in the previous version, right?

luisrudge on 20 Jul 2018

Yeah, it might've been a Next.js update that surfaced that warning now. Just an FYI -- everything still works when it gets to the client side. 😄

Timer on 20 Jul 2018

@Timer I just tested with the 9.6.1 version and the warning doesn't happen. This happens because, previously, you'd import the raw code of auth0.js + dependencies and now you import a bundled file, which is already bundled with the browser version of superagent. That's why you see the browser warning, which makes sense. I'll release this on Monday! Thanks for the help!

luisrudge on 20 Jul 2018

@luisrudge I was originally getting the exact same error as everyone mentioned earlier -- thanks for fixing that! However, now I'm getting a new, similar error when importing Auth0Lock (and I do have the new 9.7.3 Auth0.js installed). From the stack trace, it seems related to the line/file you were touching with auth0/lock#1442 - perhaps Lock needs a new release as well?

...\node_modules\auth0-js\plugins\cordova\index.js:1
(function (exports, require, module, __filename, __dirname) { import version from '../../src/version';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (...\node_modules\auth0-lock\lib\core\web_api\p2_api.js:11:16)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (...\node_modules\auth0-lock\lib\core\web_api.js:9:15)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)