Question

简而言之：我想在Gatsby中使用XMLHttpRequest，该模式可以在开发模式下使用，但是在生产（gatsby build）模式下却无法使用，我无法解决。

更多信息：我想访问一个API（准确地说是GitHub API）。因此，我发出了这样的HTTP请求：

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();

我已经围绕它开发了一些代码，并且很好用，但是当我想部署它并运行gatsby build时，我得到了：

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

我按照建议的here尝试使用i18n，但实际上根本不知道从哪里开始，因为这是我的第一个Gatsby项目，实际上也是我的第一个更大的JS项目。

更复杂的事情是，我使用了this入门程序（我的项目基本上看上去还是一样，因此您对我的代码有很好的印象），它似乎不在默认的Gatsby布局中

我将Windows 10与linux子系统（Ubuntu）一起使用，在其中运行npm，Gatsby，...，而我在Windows的IntelliJ中编辑代码-我认为这不相关，但是永远不知道这是我在运行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

因此，即使可能已经有其他人遇到了类似的问题，我也要为我的问题的具体解决方案而感激。

我实际上已经尝试过简单地部署开发版本，但这似乎并不那么容易（当像创建生产版本那样部署公用文件夹时，我只会得到一个空白页）。因此，如果您知道如何部署开发版本，这实际上也将对我有很大帮助。

Answer 1

在构建html页面期间，此操作失败，因为当时尚未定义XMLHttpRequest。在使用XMLHttpRequest之前，您可以检查它是否已定义。

if(typeof XMLHttpRequest !== "undefined")

查看此 https://www.gatsbyjs.org/docs/debugging-html-builds/

盖茨比XMLHttpRequest

1 个答案: