Npm package 'qrcode' causes Uncaught RangeError: Maximum call stack size exceeded

[CollinHerber]

I'm submitting a bug report

• Library Version:
  1.0.0-beta.15

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  v8.11.3

• NPM Version:
  6.7.0

• Browser:
  all

• Language:
  ESNext

• Loader/bundler:
  RequireJS

Current behavior:
Importing 'qrcode' npm package causes an "Exceeded Callstack" error. Prevent page load.
VM1366 vendor-bundle.js:55 Uncaught RangeError: Maximum call stack size exceeded

Repro Steps

1. au new ESNext/RequireJS/SASS/Babel/Max Minification
2. npm i qrcode
3. import * as qrcode from 'qrcode' or import qrcode from 'qrcode' or import 'qrcode'

• What is the expected behavior?
  Importing 'qrcode' npm package not to break.

PS
I wish I knew what was causing this, perhaps I'm doing something wrong on my end? I did an update from 0.33 to 1.0b15 as I've done with several of my projects and this one just happened to have that npm package in there causing that issue.
Full picture cause yth not http://prntscr.com/n9b0j6

[avrahamcool]

what browser did you test? IE? or doe's it crash in chrome also?

if the problem is with IE only, it reminds me of a problem I had a while back that was caused because of bluebird.

try setting this in your code:

import * as Bluebird from 'bluebird';
/**
 * Disable long stack traces for IE11
 */
Bluebird.config(
  {
    warnings: {
      wForgottenReturn: false
    },
    longStackTraces: false
  }
);

[3cp]

I can reproduce this problem with requirejs and systemjs. It seems has something to do with the Buffer object. I haven't figured out what exactly happened.

It looks like the other bundler I am working on, is immune to this issue. Technically, not the bundler, but the new AMD module loader I implemented, is immune.

If you want, you can try to use one of the Aurelia examples here: https://github.com/dumberjs/examples

Note, with dumber, you don't need to bring in window.process and window.Buffer manually, dumber stubs NodeJS global vars much smarter than Aurelia-CLI bundler.

Also, dumber is stable enough, I am running all my production apps with dumber.

[3cp]

Update: please ignore my suggestion on dumber.

You can make it work with current Aurelia-CLI, I just found out qrcode shipped with a precompiled umd build.

Use explicit dep config in aurelia.json

"dependencies": [
  // ...
  {
    "name": "qrcode",
    "path": "../node_modules/qrcode/build/qrcode.min.js"
  }
]

[3cp]

Now I understand why it broke.

qrcode has an inner implementation of Buffer in qrcode/lib/typedarry-buffer.js (for browser only), but one of its depenendecies, core-util-is uses Buffer as NodeJs global var.

Aurelia-CLI doesn't have proper solution for localized Buffer stub, due to limitation of rjs parser. The workaround in Aurelia-CLI was to manually bring in Buffer.

import Buffer from 'buffer';
window.Buffer = Buffer;

But this workaround creates global var Buffer in browser env, this is necessary to support core-util-is, but this conflicts with qrcode/lib/typedarry-buffer.js. Currently we have no solution in Aurelia-CLI to support this.

dumber is not affected, because dumber does proper local stub for core-util-is only.

The qrcode bundle file is self-sealed with no additional dependency(no more core-util-is), not affected either.

[3cp]

@CollinHerber what was your setup with v0.33 with this qrcode app? Do you have aurelia.json to share?

[CollinHerber]

@huochunpeng This was my aurelia.json entry for 0.33

{
    "name": "qrcode",
     "path": "../node_modules/qrcode/build",
     "main": "qrcode"
}

Let me know if there is anything else I can provide.

[3cp]

@CollinHerber thx, that's the umd build, same as my suggested fix for working within the new cli bundler. That cleared my doubt how the old cli bundler worked.

Basically you need to retain that explicit config for qrcode. That's unfortunate due to the limitation of current cli bundler.

[Alexander-Taran]

Can be closed as won't fix with workaround provided