Gatsby XMLHttpRequest | 易学教程

问题

In short: I want to use XMLHttpRequest in Gatsby, which works in development mode, but fails in production (gatsby build) mode, which I can't get fixed.

Some more information: I want to access an API (to be precise the GitHub API). Therefore I make an HTTP request like that:

const repoRequest = new XMLHttpRequest();
const repoUrl = "https://api.github.com/user/repos?visibility=all?type=all";
repoRequest.open("GET", repoUrl);
repoRequest.setRequestHeader("Authorization", "token <here would be my token>");
repoRequest.send();

I've developed some code around it and it worked fine, but when I wanted to deploy it and ran gatsby build, I got:

error Building static HTML failed

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  69 | let age = ((today - birthday) / 1000 / 60 / 60 / 24 / 365).toFixed(1);
  70 |
> 71 | const repoRequest = new XMLHttpRequest();
     |                     ^
  72 | const repoUrl = "https://api.github.com/user/repos?visibility=all?type=all";
  73 | repoRequest.open("GET", repoUrl);
  74 | repoRequest.setRequestHeader("Authorization", "token <here would be my token>");


  WebpackError: ReferenceError: XMLHttpRequest is not defined

I tried to use i18n, as suggested here, but didn't really know where to start at all, as this is my first Gatsby project and in fact also my first bigger JS project.

Complicating matters even further, I've used this starter (my project basically looks the same still, so you can get a good impression regarding my code), which does not seem to be in the default Gatsby layout.

I'm using Windows 10 with the linux subsystem (Ubuntu), in which I run npm, Gatsby, ..., whilst I edit the code in IntelliJ in Windows - I don't think this is relevant, but one never knows. This is what I get when running sudo gatsby info:

  System:
    OS: Linux 4.4 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: (16) x64 AMD Ryzen 7 1700 Eight-Core Processor
    Shell: 4.3.48 - /bin/bash
  Binaries:
    Node: 11.11.0 - /usr/bin/node
    npm: 6.9.0 - /usr/bin/npm
  Languages:
    Python: 2.7.12 - /usr/bin/python
  npmPackages:
    gatsby: ^2.1.35 => 2.1.35
    gatsby-cli: ^2.4.16 => 2.4.16
    gatsby-image: ^2.0.31 => 2.0.33
    gatsby-plugin-debug-build: ^1.0.0 => 1.0.0
    gatsby-plugin-google-analytics: ^2.0.16 => 2.0.17
    gatsby-plugin-manifest: ^2.0.22 => 2.0.24
    gatsby-plugin-netlify: ^2.0.11 => 2.0.12
    gatsby-plugin-offline: ^2.0.24 => 2.0.25
    gatsby-plugin-page-load-delay: ^0.1.2 => 0.1.2
    gatsby-plugin-react-helmet: ^3.0.8 => 3.0.9
    gatsby-plugin-sharp: ^2.0.25 => 2.0.28
    gatsby-plugin-styled-components: ^3.0.6 => 3.0.7
    gatsby-source-filesystem: ^2.0.23 => 2.0.24
    gatsby-transformer-sharp: ^2.1.15 => 2.1.17

So even though there might be others who had a similar problem already, I'd be thankful for a specific solution to my problem.

I've actually tried simply deploying the development build, but this doesn't seem to be that easy (when deplyoing the public folder, as I'd to with the production build, I simply get an empty page). So if you know how I could deploy the development build, this would actually help me a lot too.

回答1:

It fails during build of html pages because XMLHttpRequest isn't defined ta that time. before using XMLHttpRequest you can check if it is defined.

if(typeof XMLHttpRequest !== "undefined")

see this https://www.gatsbyjs.org/docs/debugging-html-builds/

来源：https://stackoverflow.com/questions/55192396/gatsby-xmlhttprequest

标签

javascript

node.js

reactjs

xmlhttprequest

gatsby