Gatsby XMLHttpRequest

Question

Короче говоря: я хочу использовать XMLHttpRequest в Gatsby, который работает в режиме разработки, но не работает в режиме производства (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

Я пытался использовать i18n, как предлагалось здесь , но на самом деле не знал, с чего начать, так как это мой первый проект Gatsby и фактически также мой первый более крупный проект JS.

Еще больше усложняет ситуацию, я использовал этот стартер (мой проект в основном выглядит так же, так что вы можете получить хорошее представление о моем коде), который, кажется, небыть в макете Gatsby по умолчанию.

Я использую Windows 10 с подсистемой linux (Ubuntu), в которой я запускаю npm, Gatsby, ..., пока я редактирую код в IntelliJ в Windows - яне думаю, что это актуально, но никто не знает.Это то, что я получаю при запуске 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/