Importing Superagent fails

[psolbach]

Tried all kinds of variations, bumping requirements to same edge versions. No dice.
When issuing import Request from 'superagent'; I get:

    Uncaught TypeError: Object prototype may only be an Object or null: undefined
    system.js:1 Uncaught Error evaluating http://localhost:8000/jspm_packages/npm/readable-stream@1.0.27-1/lib/_stream_readable.jsm@1.0.27-1/readable.js

What am I doing wrong here?

[guybedford]

If you edit readable-stream@1.0.27-1/lib/*.js and manually replace require('stream') with require('npm:stream-browserify@1.0.0/index') that will get this to work.

In terms of a fix, I can add an override to make this work, but it won't be ideal as it involves locking down the version of stream. Will put some thought to a better solution.

[guybedford]

Note there is a maximum stack sized reached error in the browser, although this is non-critical. Also working on a mid term fix for that.

[psolbach]

Thanks for the quick reply. Now I'm getting a whole bunch of new errors w/ mime-types after the maximum stack errors.

http:/localhost:8000/jspm_packages/npm/mime@1.2.11/types/mime.types
index.js:9 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

and

GET http://localhost:8000/localhost:8000/jspm_packages/npm/mime@1.2.11/types/mime.types 404 (File not found) index.js:19

because the passed URL is missing the double slash.

[guybedford]

@psolbach do you have a code example to cause that error?

[psolbach]

But still the same import Request from 'superagent';.
The call is in nodelibs-fs@0.0.1/index.js invoked by Mime.load().
Nothing installed except Vue, Superagent.
Stack-Trace:

exports.readFileSync (index.js:9)
Mime.load (mime.js:26)
(anonymous function) (mime.js:44)
(anonymous function) (mime.js:52)
(anonymous function) (mime.js:54)
doEval (system.src.js:2255)
__eval (system.src.js:2221)
a (system.src.js:335)
$__global.upgradeSystemLoader.e.instantiate.cjs.n.metadata.format.n.metadata.execute (system.src.js:1159)
f (system.src.js:667)
c (system.src.js:636)
(anonymous function) (system.src.js:671)
(anonymous function) (mime@1.2.11.js:1)
(anonymous function) (mime@1.2.11.js:2)
doEval (system.src.js:2255)
__eval (system.src.js:2221)
a (system.src.js:335)
$__global.upgradeSystemLoader.e.instantiate.cjs.n.metadata.format.n.metadata.execute (system.src.js:1159)
f (system.src.js:667)
c (system.src.js:636)
(anonymous function) (system.src.js:671)
(anonymous function) (form_data.js:10)
(anonymous function) (form_data.js:208)
(anonymous function) (form_data.js:210)
doEval (system.src.js:2255)
__eval (system.src.js:2221)
a (system.src.js:335)
$__global.upgradeSystemLoader.e.instantiate.cjs.n.metadata.format.n.metadata.execute (system.src.js:1159)
f (system.src.js:667)
c (system.src.js:636)
(anonymous function) (system.src.js:671)
(anonymous function) (form-data@0.1.3.js:1)
(anonymous function) (form-data@0.1.3.js:2)
doEval (system.src.js:2255)
__eval (system.src.js:2221)
a (system.src.js:335)
$__global.upgradeSystemLoader.e.instantiate.cjs.n.metadata.format.n.metadata.execute (system.src.js:1159)
f (system.src.js:667)
c (system.src.js:636)
(anonymous function) (system.src.js:671)
(anonymous function) (index.js:5)
(anonymous function) (index.js:494)
(anonymous function) (index.js:496)
doEval (system.src.js:2255)
__eval (system.src.js:2221)
a (system.src.js:335)
$__global.upgradeSystemLoader.e.instantiate.cjs.n.metadata.format.n.metadata.execute (system.src.js:1159)
f (system.src.js:667)
c (system.src.js:636)
(anonymous function) (system.src.js:671)
(anonymous function) (superagent@0.21.0.js:1)
(anonymous function) (superagent@0.21.0.js:2)
doEval (system.src.js:2255)
__eval (system.src.js:2221)
a (system.src.js:335)
$__global.upgradeSystemLoader.e.instantiate.cjs.n.metadata.format.n.metadata.execute (system.src.js:1159)
f (system.src.js:667)
l (system.src.js:530)
$__global.upgradeSystemLoader.e.instantiate.Promise.all.then.execute (system.src.js:841)
o (es6-module-loader.src.js:1878)
p (es6-module-loader.src.js:1926)
j (es6-module-loader.src.js:1700)
k (es6-module-loader.src.js:1748)
(anonymous function) (es6-module-loader.src.js:1574)
O (es6-module-loader.src.js:1177)
K (es6-module-loader.src.js:1136)
7.y.when (es6-module-loader.src.js:927)
7.v.run (es6-module-loader.src.js:818)
3.a._drain (es6-module-loader.src.js:97)
3.a.drain (es6-module-loader.src.js:62)
b (es6-module-loader.src.js:267)

[guybedford]

It was definitely working ok for me - which version of jspm are you using? I assume you're running in the browser?

[psolbach]

Version 0.13.4; in the Browser. It's literally the getting-started setup with the single jspm install npm:superagent and subsequent import. Giving up for now :/

[psolbach]

I can mitigate the errors except Maximum stack size and Synchronous XMLHttpRequest on the main thread is deprecated if I change the "baseURL" to "http:/" though. But that's a hack.

[guybedford]

@psolbach perhaps try jspm install npm:superagent -f before doing those rewrites. I can definitely get everything to work except for the maximum call stack issue.

[guybedford]

Finally managed to replicate this - was running on files here which for some reason was not triggering the fs.readFileSync! Unfortunately don't have much more time to look into this myself right now, so will leave this up until there is more pressure.

[psolbach]

Hey thanks for your prompt help. Will try to isolate that rogue path as well.

[activelogix]

I'm having similar issues working with other HTTP libraries in the browser. I'm assuming they're related but would be glad to create new issues.

jspm install npm:react-promise
require ('react-promise')

Results in very similar errors as superagent.

jspm install npm:needle
jspm install npm:xml2js (not declared a dependency but required)
require('needle')

Result:

Uncaught RangeError: Maximum call stack size exceeded.
XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/

[guybedford]

The specific issue is that for some reason these libraries are triggering the use of fs.readFileSync in the browser, which they shouldn't be doing even in Browserify. Some kind of conditional path in the code would be leading to this code which should only run in Node happening in the browser, but I'm not sure what conditional that would be.

[bplatz]

FWIW, I had the same superagent problems with systemjs, and have tried axiom instead and it is working well so far... in reference to @activelogix comment that other http libs are having the same issue. Perhaps there is something there that helps uncover why one works and the other doesn't. Or for those trying to stay the jspm course, at least this helps point to an alternative to keep moving forward for now.

[chrismcv]

i'm running into the same thing with a variety of ajax libs too (on windows)

[guybedford]

Please post the name of the lib as a separate issue in this repo. These bugs are valuable.

[bplatz]

Correction, I'm now using axios (https://github.com/mzabriskie/axios) as an AJAX lib without any issues thus far with SystemJS. It is also an isomorphic library, so just being isomorphic doesn't seem to be causing these issues... must be something specific superagent (and supposedly others) are doing.

[guybedford]

Fixed and working from #254, thanks to @danharper.

[psolbach]

Quoting the documentation: When loading modules from npm, the module format is treated as cjs. Why do we have to specify the format explicitly?

[guybedford]

You're right - the registry and format property are not necessary in this override.

[danharper]

My PR was originally pointing at GitHub so I added in format and registry, then changed it to use NPM. No harm though I guess.

[psolbach]

Course not! Just trying to get the hang of this.