Prerender flag doesn't work with Axios

[cptflammin]

trafficstars

As stated here - but wrongly closed - prerendering fails when using Axios

Problem is that some libraries like AWS AmplifyJS use Axios under the hood.

@adamdbradley Any idea how to solve this serious issue?

[splitinfinities]

Hey there, thank you for the patience getting back to you. The new team is getting started and we're working through the backlog now.

Can you help us make a reproduction case? This would help us to identify and solve the problem sooner rather than later.

Thank you!

[tricki]

There is a repro case in the original issue: https://github.com/xvs32x/port-stencil

I'm having the same problem with Stencil 2.8.0 and axios 0.21.3

[tricki]

I did some debugging and the problem seems to be that MockAnchorElement objects don't have a pathname property:

var urlParsingNode = document.createElement('a');
// urlParsingNode provides the UrlUtils interface - http://url.spec.whatwg.org/#urlutils
urlParsingNode.pathname === undefined

Definition of MockAnchorElement:

class MockAnchorElement extends MockHTMLElement {
  constructor(ownerDocument) {
    super(ownerDocument, 'a');
  }
  get href() {
    return fullUrl(this, 'href');
  }
  set href(value) {
    this.setAttribute('href', value);
  }
}

@splitinfinities Is there any way we can extend MockAnchorElement?

[splitinfinities]

@tricki Awesome investigation! Since that's in the definition we can add it yes, just link how href is being modified. I can't say when we can prioritize this, but if you do happen to add a PR we can get closer to getting it in.

[tricki]

I created a pull request for adding pathname. Not sure if it's how you meant it @splitinfinities, if not just ping me.

Unfortunately Axios will still not work during prerender because XMLHttpRequest doesn't seem to be mocked, but at least the build won't break anymore (Before it broke even if you only imported Axios without calling any method).

In my case I replaced the Axios call with a fetch during prerender. Not ideal but it works.

if (Build.isServer) {
  fetch('...');
} else {
  Axios.get('...');
}

[squelix]

It should work with Axios because of this code in the default.js. But in the dist-hydrate-script build, the final code in the hydrate/index.js is

function getDefaultAdapter() {
  var adapter;
  if (typeof XMLHttpRequest !== 'undefined') {
    // For browsers use XHR adapter
    adapter = xhr;
  } else if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
    // For node use HTTP adapter
    adapter = xhr;
  }
  return adapter;
}

So in my node server i get the error XMLHttpRequest is not defined. So i think the rollup configuration must be updated.

[tricki]

Good catch. It might be related to https://github.com/axios/axios/issues/2731

[cptflammin]

How could the rollup configuration be updated then ? Could the stencil team give a hand on this?

[tricki]

I just did a quick test and found a way to work around this. It's not a real solution but might help someone else debug the issue.

What I did: Based on this comment in the axios issue I linked to before I tried simply removing that line in node_modules/axios/package.json. This lead to a bunch of errors, including:

[ ERROR ]  Node Polyfills Required
           For the import "https" to be bundled from ./node_modules/axios/lib/adapters/http.js, ensure the
           "rollup-plugin-node-polyfills" plugin is installed and added to the stencil config plugins (client). Please
           see the bundling docs for more information. Further information: https://stenciljs.com/docs/module-bundling

So I installed and added rollup-plugin-node-polyfills and the issue was fixed.