Upgrading to 9.7.2 causes test breakages #806

murtyjones · 2018-07-16T18:20:42Z

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'

The text was updated successfully, but these errors were encountered:

luisrudge · 2018-07-16T18:29:56Z

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

murtyjones · 2018-07-16T18:57:02Z

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

luisrudge · 2018-07-16T20:04:31Z

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

murtyjones · 2018-07-16T22:08:02Z

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?

Timer · 2018-07-17T00:17:24Z

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.

luisrudge · 2018-07-17T00:38:58Z

@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?

Timer · 2018-07-17T01:31:03Z

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 auth0-js@9.6.x
$ 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>

luisrudge · 2018-07-17T12:57:45Z

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

In order to be able to properly do tree-shaking, we need to start using ES modules (`import` / `export`) instead of CommonJS modules (`require`). This PR is a find/replace in all files, making them use import/export. This, of course, broke all the tests 😬. `mocha`, our test runner, doesn't support modern javascript, so I needed to add `babel` to transpile the code to compatible javascript during testing. ### Summary of changes: - Added `babel` to transpile test code in order to make `mocha` work - Upgraded eslint auth0 config so it allows modern javascript. Since we're not migrating our code yet, I had to turn off [a bunch of rules](https://github.com/auth0/auth0.js/pull/774/files#diff-1dc6ee56b778cd91e0327b52aaeaa1b9R19) - change istanbul (our test coverage runner) to nyc. nyc is pretty much istanbul 2.0 (see [here](istanbuljs/nyc#524 (comment))) - upgraded prettier, so we might have a few automatic styling changes - upgrade circle-ci to node@v8.9.0 because of a dependency

- Remove rollup-plugin-uglify because it doesn't support minifying ES6+. Using rollup-plugin-terser instead - Don't generate prod files when in dev mode - instead of using main/browser in package.json, using module/main (ES modules, UMD bundle) - This follows best practices outlined [here](#806 (comment)), [here](http://2ality.com/2017/04/setting-up-multi-platform-packages.html#solutions) and [here](https://github.com/rollup/rollup-starter-lib/blob/master/package.json#L5-L6).

luisrudge · 2018-07-18T20:13:23Z

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 auth0-js@9.7.3-beta1
$ 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 · 2018-07-18T20:23:38Z

@Timer @murtyjones

murtyjones · 2018-07-18T22:30:57Z

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

@luisrudge Thank you for fixing!

luisrudge · 2018-07-18T22:38:02Z

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

Timer · 2018-07-19T18:31:46Z

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!

luisrudge · 2018-07-19T22:30:56Z

ok thanks @Timer

Timer · 2018-07-20T00:30:58Z

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

Timer · 2018-07-20T00:33:22Z

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 "superagent@3.8.3"
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.

luisrudge · 2018-07-20T01:31:59Z

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

Timer · 2018-07-20T19:52:39Z

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. 😄

luisrudge · 2018-07-20T20:00:59Z

@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!

coreymason · 2018-07-24T06:13:45Z

@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)

luisrudge · 2018-07-24T16:12:03Z

Hi @coreymason! We just released Lock@11.8.0 which has an updated version of auth0-js. Can you try that again? Thanks!

murtyjones changed the title ~~Upgrading to 9.7.3 causes test breakages~~ Upgrading to 9.7.2 causes test breakages Jul 16, 2018

luisrudge closed this as completed Jul 16, 2018

luisrudge mentioned this issue Jul 18, 2018

Fix npm module export #808

Merged

luisrudge mentioned this issue Jul 20, 2018

Version 9.7.0 should have been a major version. Breaks compatibility with Node 8 due to import #811

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrading to 9.7.2 causes test breakages #806

Upgrading to 9.7.2 causes test breakages #806

murtyjones commented Jul 16, 2018

luisrudge commented Jul 16, 2018

murtyjones commented Jul 16, 2018

luisrudge commented Jul 16, 2018

murtyjones commented Jul 16, 2018 •

edited

Loading

Timer commented Jul 17, 2018 •

edited

Loading

luisrudge commented Jul 17, 2018

Timer commented Jul 17, 2018

luisrudge commented Jul 17, 2018

luisrudge commented Jul 18, 2018

luisrudge commented Jul 18, 2018

murtyjones commented Jul 18, 2018

luisrudge commented Jul 18, 2018

Timer commented Jul 19, 2018

luisrudge commented Jul 19, 2018

Timer commented Jul 20, 2018

Timer commented Jul 20, 2018 •

edited

Loading

luisrudge commented Jul 20, 2018

Timer commented Jul 20, 2018

luisrudge commented Jul 20, 2018

coreymason commented Jul 24, 2018

luisrudge commented Jul 24, 2018

Upgrading to 9.7.2 causes test breakages #806

Upgrading to 9.7.2 causes test breakages #806

Comments

murtyjones commented Jul 16, 2018

luisrudge commented Jul 16, 2018

murtyjones commented Jul 16, 2018

luisrudge commented Jul 16, 2018

murtyjones commented Jul 16, 2018 • edited Loading

Timer commented Jul 17, 2018 • edited Loading

luisrudge commented Jul 17, 2018

Timer commented Jul 17, 2018

luisrudge commented Jul 17, 2018

luisrudge commented Jul 18, 2018

luisrudge commented Jul 18, 2018

murtyjones commented Jul 18, 2018

luisrudge commented Jul 18, 2018

Timer commented Jul 19, 2018

luisrudge commented Jul 19, 2018

Timer commented Jul 20, 2018

Timer commented Jul 20, 2018 • edited Loading

luisrudge commented Jul 20, 2018

Timer commented Jul 20, 2018

luisrudge commented Jul 20, 2018

coreymason commented Jul 24, 2018

luisrudge commented Jul 24, 2018

murtyjones commented Jul 16, 2018 •

edited

Loading

Timer commented Jul 17, 2018 •

edited

Loading

Timer commented Jul 20, 2018 •

edited

Loading