Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
CollinHerber opened this issue Apr 8, 2019 · 8 comments

Comments

@CollinHerber
Copy link

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
Copy link
Contributor

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
Copy link
Member

3cp commented Apr 8, 2019

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
Copy link
Member

3cp commented Apr 8, 2019

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
Copy link
Member

3cp commented Apr 8, 2019

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
Copy link
Member

3cp commented Apr 8, 2019

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

@CollinHerber
Copy link
Author

@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
Copy link
Member

3cp commented Apr 9, 2019

@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
Copy link
Contributor

Can be closed as won't fix with workaround provided

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants