missing HTTP adapter?

[UnsungHero97]

Axios v0.14.0
Node v6.6.0

I'm trying to do a simple GET, and I'm faced with ReferenceError: XMLHttpRequest is not defined. I was looking through the code in dist/axios.js, and I'm seeing something unexpected:

if (typeof config.adapter === 'function') {
  // For custom adapter support
  adapter = config.adapter;
} else if (typeof XMLHttpRequest !== 'undefined') {
  // For browsers use XHR adapter
  adapter = __webpack_require__(10);
} else if (typeof process !== 'undefined') {
  // For node use HTTP adapter
  adapter = __webpack_require__(10);
}

Webpack seems to be requiring the same dependency for both XHR and HTTP adapters, __webpack_require__(10). Further, when I search for httpAdapter and dispatchHttpRequest, nothing comes up.

Is the v0.14.0 release missing the HTTP adapter?

[UnsungHero97]

Hmmm... I changed webpack to export to node instead of web, and it's working now. Not sure what the difference is, but seems like this isn't a real problem.

[UnsungHero97]

@mzabriskie ping

I just wanted to follow up on this to try and get a better understanding of why this happens. I found that the build is different depending on if webpack is targeting node or web. In the case of web, webpack is picking up the browser field from axios's package.json:

"browser": {
  "./lib/adapters/http.js": "./lib/adapters/xhr.js"
},

As such, if I configure webpack with target: 'web', I get the following in the bundle:

var adapter;
if (typeof config.adapter === 'function') {
  // For custom adapter support
  adapter = config.adapter;
} else if (typeof XMLHttpRequest !== 'undefined') {
  // For browsers use XHR adapter
  adapter = __webpack_require__("./node_modules/axios/lib/adapters/xhr.js");
} else if (typeof process !== 'undefined') {
  // For node use HTTP adapter
  adapter = __webpack_require__("./node_modules/axios/lib/adapters/xhr.js");
}

Now, when I change to target: 'node', I get the following:

var adapter;
if (typeof config.adapter === 'function') {
  // For custom adapter support
  adapter = config.adapter;
} else if (typeof XMLHttpRequest !== 'undefined') {
  // For browsers use XHR adapter
  adapter = __webpack_require__("./node_modules/axios/lib/adapters/xhr.js");
} else if (typeof process !== 'undefined') {
  // For node use HTTP adapter
  adapter = __webpack_require__("./node_modules/axios/lib/adapters/http.js");
}

Shouldn't the build be consistent no matter what webpack is targeting? Isn't the point of this if-elseif-elseif block to determine which adapter to use based on the current environment at run-time? Why even have that if-elseif-elseif block if it gets changed at build-time?

[nickuraltsev]

The idea here is to not include the http adapter and its dependencies to web bundles to reduce their size.

[UnsungHero97]

@nickuraltsev Got it. Any suggestions on how to build axios with both adapters included, with the goal being to bundle a single library that can run both on the web and in node?

[leepowelldev]

@UnsungHero97 Did you resolve this? I'm having the same issue - trying to build a single bundle I can use on both the browser and node. At the moment I'm having to inject the xhr adapter into the defaults in Node. It works but isn't a clean solution.

[UnsungHero97]

I ended up creating 2 separate builds, each targeting their respective environments, 1 for web and 1 for node.

[Naramsim]

Using the target: 'node' with the entry node: { process: false }, and a plugin

plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]

Makes the output library both working on the web and node.