Gatsby: Окно не определено

Да, во время разработки компоненты React запускаются только в браузере, где определено window . При сборке Гэтсби отображает эти компоненты на сервере, где window не определено. Как правило, с React решением этой проблемы является только доступ к window в componentDidMount или проверка существования window перед доступом к нему. Для сторонних библиотек, которые этого не делают, то, что вы сделали, отлично выглядит.

@KyleAMathews Я не могу заставить componentDidMount стрелять в html.js или _template.jsx используя gatsby develop , может быть, это не должно, или я делаю Что-то не так?

@hitchcott, можешь рассказать немного о своей сборке? Я только что установил semantic-ui в проект gatsby, но мой CSS не работает. Не знаю, как загрузить CSS на мою страницу. React предполагает, что встроенные стили верны, но как он о них узнает? Также я полагаю, что мне нужно настроить webpack на сборку LESS вместо gulp. Вы только что установили веб-пакет без загрузчика?

@Maxhodges - это Webpack, а не React, который «знает» о ваших стилях. Webpack знает об этом, потому что вы импортируете или требуете скомпилированные файлы где-то в JS-файлах, которые входят в комплект.

Например, я импортирую свой основной styles.css в файл _template.js , поэтому, когда Webpack создает пакет, он включает эти стили - встроенные в режим разработки; внешний файл, на который ссылаются, в процессе производства (см. здесь cssLink для примера ).

Нет необходимости в дополнительном загрузчике LESS, поскольку Gatsby уже включает его в конфигурацию Webpack по умолчанию .

для тех из вас, кто следовал инструкциям на странице Gatsby GitHub по установке сайта документации ...
import { colors } from 'utils/colors'
- создатель проблем, и после того, как вы прокомментировали это и $ {colors.bg}, сайт развился хорошо.

Можно ли было бы лучше показать сообщение об ошибке, когда это произойдет? Понятия не имею, где найти ошибку.

Failed at generating HTML

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
      throw err;
      ^
Error: ReferenceError: window is not defined
    at Object.defineProperty.value (render-page.js:44529:79)
    at __webpack_require__ (render-page.js:30:30)
    at Object.exports.__esModule (render-page.js:42560:24)
    at __webpack_require__ (render-page.js:30:30)
    at Object.defineProperty.value (render-page.js:42533:51)
    at __webpack_require__ (render-page.js:30:30)
    at Object.<anonymous> (render-page.js:80:19)
    at __webpack_require__ (render-page.js:30:30)
    at Object.assign.i (render-page.js:50:18)
    at render-page.js:53:10
error Command failed with exit code 1.

Это действительно хорошая идея! Сейчас сильно нажимаю на 1.0, поэтому не получу этого
скоро, а пока просто откройте public / render-page.js с номером строки
указан там (44529) и посмотрите, какой код вызывает проблемы.

В среду, 17 мая 2017 г., в 11:45 Томас Себерехтс [email protected]
написал:

Можно ли было бы лучше показать сообщение об ошибке, когда это произойдет? я
понятия не имею, где найти ошибку.

Не удалось создать HTML

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
бросить ошибку;
^
Ошибка: ReferenceError: окно не определено
в Object.defineProperty.value (render-page.js: 44529: 79)
в __webpack_require__ (render-page.js: 30:30)
в Object.exports .__ esModule (render-page.js: 42560: 24)
в __webpack_require__ (render-page.js: 30:30)
в Object.defineProperty.value (render-page.js: 42533: 51)
в __webpack_require__ (render-page.js: 30:30)
на объекте.(render-page.js: 80:19)
в __webpack_require__ (render-page.js: 30:30)
в Object.assign.i (render-page.js: 50: 18)
в render-page.js: 53: 10
error Команда не удалась с кодом выхода 1.

-
Вы получаете это, потому что вас упомянули.

Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/gatsbyjs/gatsby/issues/309#issuecomment-302041105 ,
или отключить поток
https://github.com/notifications/unsubscribe-auth/AAEVh6E9bZyyi0iX-Q7Q92VTvEb1DZbmks5r6sHGgaJpZM4Isiea
.

Это сработало! Спасибо.

Совет: поставьте typeof window !== 'undefined' && window.whaterver-you-need чтобы решить эту проблему.

ошибка исчезает при использовании componetDidMount

У меня аналогичная проблема, но я использую localStorage, чтобы сохранить часть моего состояния redux в браузере. Как обойти эту проблему, если я не могу использовать window.localStorage в файле store.js?

😢

Спасибо!

@gregorskii

const windowGlobal = typeof window !== 'undefined' && window

затем windowGlobal.localStorage

Да, это сработало, но мне пришлось имитировать локальное хранилище, используя https://www.npmjs.com/package/localstorage-memory :

const windowGlobal = typeof window !== 'undefined' && window;
const localAdapter = windowGlobal ?
  adapter(windowGlobal.localStorage) :
  adapter(memoryStorage)
;

Используя https://www.npmjs.com/package/redux-localstorage.

доступ только к window в componentDidMount

Gist для сторонних js.

// index.js
import React from "react";
import Link from "gatsby-link";

// import "uikit/dist/js/uikit";
// Third party JS access `window` without
// `typeof window !== "undefined"` check

class Template extends React.Component {
  componentDidMount() {
    import("uikit/dist/js/uikit")
      .then((uikit) => {
        this.uikit = uikit;
      })
      .catch((error) => console.error(error));
  }
  render() {
    // ...
  }
}

// ...

Предложение @CallMeLaNN сработало для меня. С UIkit я получаю:

WebpackError: элемент не определен

Помещение импорта внутри componentDidMount сработало.

 componentDidMount() {
    try {
      this.UIkit = require("uikit/dist/js/uikit");
      this.Icons = require("uikit/dist/js/uikit-icons");
      this.UIkit.use(this.Icons);
    } catch (e) {
      console.error(e);
    }
  }

Да, во время разработки компоненты React запускаются только в браузере, в котором определено окно. При сборке Гэтсби отображает эти компоненты на сервере, где окно не определено. Как правило, с React решением этой проблемы является только окно доступа в componentDidMount или проверка существования этого окна перед доступом к нему. Для сторонних библиотек, которые этого не делают, то, что вы сделали, отлично выглядит.

Было бы очень полезно выявить это раньше / на видном месте. Я пытаюсь построить впервые, и сейчас мне нужно исправить много проблем, так как я не знал, что это может стать проблемой. Это особенно тяжело, так как мне срочно нужно это развернуть; Я подаю предложение по чему-то, и мне нужно, чтобы сайт был в сети.

Я только собираюсь развернуть его на Github Pages (по крайней мере, пока), поэтому мне не нужен SSR. Есть ли способ просто строить для клиентов?

Похоже, что с Gatsby v2 вам нужно выбирать между импортом es6 и commonjs, вы больше не сможете их смешивать по причинам, связанным с webpack 4.

В этом случае и при условии, что вы уже используете импорт es6, может показаться, что решение @ jfaeldon - это то, что нужно здесь, а @ hitchcott больше не будет работать.

Кто-нибудь может это подтвердить?

@joshwcomeau полностью с вами согласен, также я не считаю хорошей идеей запускать dev только в браузере и встраивать node.js. Разница настолько велика, и, как и в средах DEV и PROD, вы хотите сделать среды как можно более похожими, я думаю, что gatsby должен сделать то же самое, запустить и dev, и построить в среде, которая максимально похожа.

Итак, могу ли я запустить сборку в браузере? Мне не нужен SSR.

Привет,
У меня здесь та же проблема, Coverflow отлично работает для разработки gatsby, но при сборке выдает ошибку:
WebpackError: окно не определено

     - react-coverflow.js:1 Object.<anonymous>
       ~/react-coverflow/dist/react-coverflow.js:1:330

     - main.js:1 Object.<anonymous>
       ~/react-coverflow/main.js:1:1

импортировать Coverflow из response-coverflow;
импортировать {StyleRoot} из 'radium'

class Team extends React.Component {

оказывать(){
возвращение(

displayQuantityOfSide = {2}
навигация
бесконечная прокрутка
enableHeading
active = {0}
media = {{
' @media (max-width: 720px)': {
ширина: '100%',
высота: '200 пикселей'
},
' @media (min-width: 720px)': {
ширина: '100%',
высота: '400 пикселей',
}
}}
>

  </Coverflow>
</StyleRoot>
)

}
}

экспорт команды по умолчанию;

Я получил эту ошибку после установки нескольких пакетов, поэтому она должна быть в одном из них, но я не могу найти, в чем проблема. У кого-нибудь есть советы о том, как лучше выяснить, какой это может быть пакет npm? Ошибка общего характера.

может быть, реализация реакции лучше?
https://react.semantic-ui.com/ и https://github.com/pretzelhands/gatsby-starter-semantic-ui

@wmlutz, самое простое объяснение, которое я могу предложить: когда вы вводите gatsby develop для сборки проекта, над которым вы работаете, или gatsby build && gatsby serve для производственной сборки, Gatsby внутренне генерирует страницы и CSS, ссылки и так далее. Но нужно иметь в виду, что это делается на стороне сервера, на стороне узла, а не на стороне клиента. Таким образом, у узла нет доступа к этим конкретным API, поскольку они предназначены только для использования клиентом. И с этим некоторые пакеты не будут хорошо работать с Гэтсби из коробки. Могут потребоваться некоторые изменения, чтобы они "играли хорошо"

@jonniebigodes - Спасибо за это. Думаю, теперь я понимаю _why_. Моя вещь теперь _what_. Я по глупости проделал тонну работы и не могу определить, какой пакет вызывает проблему. Нет возможности gatsby build с более подробным отчетом об ошибках?

@jonniebigodes - Я выяснил, в реагировать на тосты . Моя следующая проблема - выяснить, как это исправить.

_handleSubmit = async (e) => {
    e.preventDefault();
    let {email} = this.state;

    const response = await addToMailchimp(email)
    if (response.result === "success") {
      ToastsStore.success("Successfully joined the list")
    }
    if (response.result === "error") {
      ToastsStore.error("There was an error: " + result.msg)
    }
  }

@wmlutz что-то вроде блока кода ниже. react загружается после получения исходного статического пакета. Таким образом, к тому времени, когда пользователь достигнет _handleSubmit window будет существовать.

Обратите внимание, что если react toasts вызывает window на import ошибка все равно может возникать.

_handleSubmit = async (e) => {
    e.preventDefault();
    let {email} = this.state;

    const response = await addToMailchimp(email)
    if (response.result === "success") {
      if (window) ToastsStore.success("Successfully joined the list")
    }
    if (response.result === "error") {
      if (window) ToastsStore.error("There was an error: " + result.msg)
    }
  }

Та же проблема. Я найду другую библиотеку тостов или сделаю свою. Не должен меня убивать.

@ joserocha3 этот фрагмент кода будет работать только в режиме разработки. Когда выполняется вызов производственной сборки, на этапе error Building static HTML failed произойдет сбой. Поскольку Гэтсби будет анализировать импорт, и с этим поиском рассматриваемого пакета он потерпит неудачу, потому что он использует некоторые apis, не родные для node.js и @wmlutz, код для этого пакета довольно прост и не должен

Я согласен с @jonniebigodes насчет разветвления. Источник репо - это всего несколько файлов. Оскорбительный вызов - это ссылка на document в ToastsContainer.tsx .

Или попробуйте https://github.com/gatsbyjs/gatsby/issues/309#issuecomment -387039877, упомянутый выше.

Причина в том, как работают строгий режим, UMD и бандлинг.

Разветвление не требуется, если вы используете patch-package .

Также см. Https://github.com/webpack/webpack/issues/6677 и связанные проблемы.

Это зависит от кода tgat, который вы используете, и от того, проводят ли они надлежащие проверки или вообще используют umd target и определяют глобальные объекты.

Привет, ребята, все еще возникает та же проблема. Я не использовал оконную функцию в своем проекте, но все равно выдает ту же ошибку, почему у меня есть эта ..?

1:09:03 AM: сборка готова к запуску
11:09:05 AM: версия образа сборки: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
11:09:05 AM: тег сборки изображения: v3.3.2
11:09:05 AM: версия buildbot: 75cd99f62ada9e21edea53208e8baf0eab85a045
11:09:06 AM: Получение кешированных зависимостей
11:09:06 AM: начало загрузки кеша размером 194,6 МБ
11:09:07 AM: загрузка кеша завершена через 1.636969993s.
11:09:07 AM: начало извлечения кеша
11:09:17 AM: завершено извлечение кеша через 9.693656527s
11:09:17 AM: завершено получение кеша через 11,478174001 с.
11:09:17: начало подготовки репо к сборке
11:09:17 AM: Подготовка Git Reference pull / 21 / head
11:09:18 AM: обнаружил netlify.toml. Переопределение конфигурации сайта
11:09:18 AM: Запуск скрипта сборки
11:09:18 AM: установка зависимостей
11:09:19: начато восстановление кэшированной версии узла.
11:09:22 AM: Завершено восстановление кэшированной версии узла.
11:09:23: версия 10.16.0 уже установлена.
11:09:24 AM: теперь используется узел v10.16.0 (npm v6.9.0)
11:09:25 AM: попытка ruby ​​версии 2.6.2, чтение из среды
11:09:27 AM: Использование Ruby версии 2.6.2
11:09:27 AM: Использование PHP версии 5.6
11:09:27 AM: Начато восстановление модулей кешированных узлов.
11:09:27 AM: Завершено восстановление модулей кэшированных узлов.
11:09:27 AM: Начато восстановление кешированного кеша пряжи.
11:09:27 AM: Завершено восстановление кешированного кеша пряжи.
11:09:28 AM: Установка модулей NPM с использованием Yarn версии 1.9.4
11:09:29 AM: yarn install v1.9.4
11:09:29 AM: предупреждение package.json: нет поля лицензии
11:09:29: обнаружено предупреждение package-lock.json. Ваш проект содержит файлы блокировки, созданные другими инструментами, кроме Yarn. Рекомендуется не смешивать менеджеры пакетов, чтобы избежать несогласованности разрешения, вызванной несинхронизированными файлами блокировки. Чтобы убрать это предупреждение, удалите package-lock.json.
11:09:29 AM: предупреждение [email protected]: Нет поля лицензии
11:09:29 AM: [1/4] Разрешение пакетов ...
11:09:31 AM: [2/4] Получение пакетов ...
11:09:31 AM: (узел: 1201) [DEP0005] DeprecationWarning: Buffer () устарел из-за проблем с безопасностью и удобством использования. Используйте вместо них методы Buffer.alloc (), Buffer.allocUnsafe () или Buffer.from ().
11:10:04: info fsevents @ 1.2.7: Платформа "linux" несовместима с этим модулем.
11:10:04 AM: информация «[email protected]» - это необязательная зависимость и неудачная проверка совместимости. Исключение из установки.
11:10:04 AM: [3/4] Связывание зависимостей ...
11:10:04 AM: предупреждение "gatsby> [email protected]" имеет неверную зависимость от однорангового узла "graphql@^0.12.0 || ^ 0.13.0".
11:10:04 AM: предупреждение "gatsby> [email protected]" имеет неправильную зависимость от однорангового узла "graphql@^0.10.0 || ^ 0.11.0 || ^ 0.12.0 || ^ 0.13.0".
11:10:04 AM: предупреждение "gatsby> [email protected]" имеет неверную зависимость от однорангового узла "graphql@^0.13.0".
11:10:04 AM: предупреждение "gatsby-plugin-netlify> [email protected]" имеет неудовлетворенную одноранговую зависимость "webpack @> = 4.4.0".
11:10:04 AM: предупреждение «gatsby-plugin-sass> [email protected]» имеет неудовлетворенную одноранговую зависимость «webpack@^3.0.0 || ^ 4.0.0».
11:10:04 AM: предупреждение "> [email protected]" имеет неудовлетворенную одноранговую зависимость "webpack@^2.0.0 || ^ 3.0.0 || ^ 4.0.0".
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «immutable@^3.7.6».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-lib-auth@^2.0.4».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-lib-util@^2.1.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.6».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-emotion@^9.2.6».
11:10:04 AM: предупреждение "netlify-cms> [email protected]" имеет неудовлетворенную одноранговую зависимость "immutable@^3.7.6".
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-lib-auth@^2.0.0».
11:10:04 AM: предупреждение "netlify-cms> [email protected]" имеет неудовлетворенную одноранговую зависимость "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: предупреждение "netlify-cms> [email protected]" имеет неудовлетворенную одноранговую зависимость "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-emotion@^9.2.6».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-lib-auth@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-lib-util@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-emotion@^9.2.6».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «immutable@^3.7.6».
11:10:04 AM: предупреждение "netlify-cms> [email protected]" имеет неудовлетворенную одноранговую зависимость "netlify-cms-lib-auth@^2.0.0".
11:10:04 AM: предупреждение "netlify-cms> [email protected]" имеет неудовлетворенную одноранговую зависимость "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: предупреждение "netlify-cms> [email protected]" имеет неудовлетворенную одноранговую зависимость "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-emotion@^9.2.6».
11:10:04 AM: предупреждение "netlify-cms> [email protected]" имеет неудовлетворенную одноранговую зависимость "immutable@^3.8.2".
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-lib-util@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-emotion@^9.2.6».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-immutable-proptypes@^2.1.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-lib-util@^2.0.4».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-immutable-proptypes@^2.1.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «moment@^2.11.2».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-emotion@^9.2.6».
11:10:04 AM: предупреждение "netlify-cms> [email protected]" имеет неудовлетворенную одноранговую зависимость "immutable@^3.7.6".
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-emotion@^9.2.6».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-immutable-proptypes@^2.1.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «immutable@^3.7.6».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-emotion@^9.2.6».
11:10:04 AM: предупреждение "netlify-cms> [email protected]" имеет неудовлетворенную одноранговую зависимость "immutable@^3.7.6".
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение "netlify-cms> [email protected]" имеет неудовлетворенную одноранговую зависимость "react-emotion@^9.2.6".
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-immutable-proptypes@^2.1.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-immutable-proptypes@^2.1.0».
11:10:04 AM: предупреждение "netlify-cms> [email protected]" имеет неудовлетворенную одноранговую зависимость "immutable@^3.7.6".
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-emotion@^9.2.5».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-immutable-proptypes@^2.1.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «immutable@^3.7.6».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-emotion@^9.2.6».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-immutable-proptypes@^2.1.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «immutable@^3.7.6».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-emotion@^9.2.5».
11:10:04 AM: предупреждение "netlify-cms> [email protected]" имеет неудовлетворенную одноранговую зависимость "immutable@^3.7.6".
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «react-immutable-proptypes@^2.1.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение «netlify-cms> [email protected]» имеет неудовлетворенную одноранговую зависимость «netlify-cms-ui-default@^2.0.0».
11:10:04 AM: предупреждение "netlify-cms> netlify-cms-widget-date> [email protected]" имеет неудовлетворенную зависимость от однорангового узла "moment @> = 2.16.0".
11:10:04 AM: предупреждение "netlify-cms> netlify-cms-widget-markdown> [email protected]" имеет неудовлетворенную одноранговую зависимость "immutable @> = 3.8.1".
11:10:04 AM: предупреждение "netlify-cms> netlify-cms-widget-markdown> [email protected]" имеет неудовлетворенную одноранговую зависимость "immutable@^3.8.2".
11:10:04 AM: предупреждение "netlify-cms> netlify-cms-widget-markdown> [email protected]" имеет неверную зависимость от однорангового узла "slate@^0.32.0".
11:10:04 AM: предупреждение "netlify-cms> netlify-cms-widget-markdown> [email protected]" имеет неудовлетворенную одноранговую зависимость "immutable@^3.8.1".
11:10:04 AM: предупреждение "netlify-cms> netlify-cms-widget-markdown> [email protected]" имеет неверную зависимость от однорангового узла "slate@^0.33.3".
11:10:04 AM: предупреждение "netlify-cms> netlify-cms-widget-markdown> [email protected]" имеет неудовлетворенную одноранговую зависимость "slate-schema-violations@^0.1.7".
11:10:04 AM: предупреждение "netlify-cms> netlify-cms-widget-markdown> [email protected]" имеет неудовлетворенную одноранговую зависимость "immutable @> = 3.8.1".
11:10:04 AM: предупреждение "netlify-cms> netlify-cms-widget-markdown> [email protected]" имеет неудовлетворенную одноранговую зависимость "immutable @> = 3.8.1".
11:10:04 AM: предупреждение "netlify-cms> netlify-cms-core> redux-notifications> [email protected]" имеет неверную зависимость от узла "redux@^2.0.0 || ^ 3.0.0".
11:10:04 AM: предупреждение "netlify-cms> netlify-cms-widget-markdown> slate-react> [email protected]" имеет неудовлетворенную зависимость от однорангового узла "immutable @> = 3.8.1".
11:10:04 AM: предупреждение "> [email protected]" имеет неверную одноранговую зависимость "react@^16.8.3".
11:10:21 AM: [4/4] Сборка новых пакетов ...
11:10:26 AM: Сделано за 56.59 сек.
11:10:26 AM: модули NPM, установленные с помощью Yarn
11:10:26 AM: предупреждение package.json: нет поля лицензии
11:10:26 AM: Начато восстановление кешированного кеша Go.
11:10:26 AM: Завершено восстановление кешированного кеша Go.
11:10:27 AM: ГСНО отключено;
11:10:27 AM: отключено GOARCH;
11:10:27 AM: экспорт GOROOT = '/ opt / buildhome / .gimme / versions / go1.12.linux.amd64';
11:10:27 AM: экспорт PATH = "/ opt / buildhome / .gimme / versions / go1.12.linux.amd64 / bin: $ {PATH}";
11:10:27 AM: перейти версия> & 2;
11:10:27 AM: экспорт GIMME_ENV = '/ opt / buildhome / .gimme / env / go1.12.linux.amd64.env';
11:10:27: go версия go1.12 linux / amd64
11:10:27 AM: Установка недостающих команд
11:10:27 AM: проверьте каталог запуска
11:10:27 AM: Выполнение пользовательской команды: npm run build
11:10:27 AM:> [email protected] build / opt / build / repo
11:10:27 AM:> run-p build: **
11:10:28 AM:> [email protected] build: app / opt / build / repo
11:10:28 AM:> npm run clean && gatsby build
11:10:28 AM:> [email protected] clean / opt / build / repo
11:10:28 AM:> rimraf .cache public
11:10:32 AM: Использование конфигурации среды: «производство»
11:10:32 AM: успешное открытие и проверка конфигураций gatsby - 0,059 с
11:10:32 AM: успешная загрузка плагинов - 0,454 с.
11:10:34 AM: успех onPreInit - 1,665 с
11:10:34 AM: успешное удаление файлов html и css из предыдущих сборок - 0,008 с
11:10:34 AM: успешная инициализация кеша - 0,011 с
11:10:34 AM: успешное копирование файлов gatsby - 0,035 с
11:10:34 AM: успех onPreBootstrap - 0,009 с
11:10:51 AM: источник успеха и узлы преобразования - 17,231 с.
11:10:52 AM: схема построения успеха - 0,896 с
11:10:55 AM: success createPages - 2,772 с
11:10:55 AM: успех createPagesStatefully - 0,062 с
11:10:55 AM: успех onPreExtractQueries - 0,006 с
11:10:56 AM: схема успешного обновления - 0,712 с
11:10:56 AM: успешное извлечение запросов из компонентов - 0,166 с
11:10:57 AM: успешный запуск запросов graphql - 1,068 с - 1460/1460 1368,43 запросов в секунду
11:10:57 AM: успешно выписать данные страницы - 0,035 с
11:10:57: успешно выписать данные перенаправления - 0,001 с
11:10:57 AM: успех onPostBootstrap - 0,010 с
11:10:57 AM: загрузка информации завершена - 28.304 с
11:12:14 AM: успех Создание производственных пакетов JavaScript и CSS - 76,329 с
11:12:14 утра:
11:12:14: gatsby-plugin-purgecss:
11:12:14 AM: Предыдущий размер CSS: 305,33 КБ
11:12:14 AM: новый размер CSS: 305,33 КБ (-0,00%)
11:12:14 AM: удалено ~ 0,00 КБ CSS.
11:12:14 утра:
11:12:23: ошибка Ошибка построения статического HTML
11:12:23 AM: См. Нашу страницу документации по отладке сборок HTML для получения помощи https://gatsby.app/debug-html
11:12:23: 48 | window.YouTubeIframeLoader = YouTubeIframeLoader;
11:12:23: 49 | }
11:12:23:> 50 | }(окно));
11:12:23: | ^
11:12:23: 51 |
11:12:23 утра:
11:12:23 AM: WebpackError: ReferenceError: окно не определено
11:12:23 утра:
11:12:23 AM: - index.js: 50 Object ../ node_modules / youtube-iframe / index.js
11:12:23: [lib] / [youtube-iframe] /index.js:50:2
11:12:23 утра:
11:12:23 AM: - bootstrap: 19 __webpack_require__
11:12:23 AM: lib / webpack / bootstrap: 19 : 1
11:12:23 утра:
11:12:23 AM: - MediaAutoTrack.js: 15 объектов ../ node_modules / @ aws-ampify / analytics / lib / Provid ers / AmazonPersonalizeHelper / MediaAutoTrack.js
11:12:23: [lib] / [@ aws-ampify] / analytics / lib / Providers / AmazonPersonalizeHelper / MediaAu toTrack.js: 15:27
11:12:23 утра:
11:12:23 AM: - bootstrap: 19 __webpack_require__
11:12:23 AM: lib / webpack / bootstrap: 19 : 1
11:12:23 утра:
11:12:23: - index.js: 7 Object ../ node_modules / @ aws-ampify / analytics / lib / Providers / Amazon PersonalizeHelper / index.js
11:12:23: [lib] / [@ aws-ampify] /analytics/lib/Providers/AmazonPersonalizeHelper/index.js:7:10
11:12:23 утра:
11:12:23 AM: - bootstrap: 19 __webpack_require__
11:12:23 AM: lib / webpack / bootstrap: 19 : 1
11:12:23 утра:
11:12:23 AM: - AmazonPersonalizeProvider.js: 52 Object ../ node_modules / @ aws-ampify / analytics /lib/Providers/AmazonPersonalizeProvider.js
11:12:23: [lib] / [@ aws-ampify] /analytics/lib/Providers/AmazonPersonalizeProvider.js:52: 33
11:12:23 утра:
11:12:23 AM: - bootstrap: 19 __webpack_require__
11:12:23 AM: lib / webpack / bootstrap: 19 : 1
11:12:23 утра:
11:12:23: - index.js: 7 Object ../ node_modules / @ aws-ampify / analytics / lib / Providers / index. js
11:12:23: [lib] / [@ aws-ampify] /analytics/lib/Providers/index.js:7:35
11:12:23 утра:
11:12:23 AM: - bootstrap: 19 __webpack_require__
11:12:23 AM: lib / webpack / bootstrap: 19 : 1
11:12:23 утра:
11:12:23: - index.js: 33 Object ../ node_modules/@aws-amplify/analytics/lib/index.js
11:12:23: [lib] / [@ aws-ampify] /analytics/lib/index.js:33:10
11:12:24 AM: сбой на этапе «строительство сайта»: сценарий сборки вернул ненулевой код выхода: 1
11:12:23 утра:
11:12:23 AM: - bootstrap: 19 __webpack_require__
11:12:23 AM: lib / webpack / bootstrap: 19 : 1
11:12:23 утра:
11:12:24 AM: Выключение ведения журнала, 58 сообщений ожидают ответа.

Я использую netlify для своей серверной части

Если вы уверены, что не используете окно, скорее всего, есть пакет.

Вы должны определить пустое окно в webpack.

Это не очень просто, но это приведет вас в правильном направлении:

https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack

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

Очень плохо, что браузер и логика SSR связаны. Не говоря уже о том, что вы запускаете одну версию кода в разработке и расхождение с ней в продакшене. Это действительно плохо. Зачем вам делать такие сборки? Единственная разница между этими двумя должна заключаться в включении функций отладки в процессе разработки и, например, исходных карт или чего-то еще. Это действительно делает использование Gatsby сложным и интересным.

На мой взгляд, вам следует снова открыть это и сделать этот вопрос приоритетным. Эта проблема заставляет людей буквально отказываться от тысяч модулей, которые зависят от окна, и не все из них могут быть импортированы в componentDidMount, например, HOC-подобные модули и т. Д.

Хотя я не возражаю, это проблема. Можно утверждать, что библиотеки, написанные с логикой вокруг переменной окна, не подходят для использования SSR. Эти библиотеки сами должны проверять, определено ли окно и работает ли он в режиме SSR.

Никаких других комментариев по более глубокому вопросу, который вы делаете, это философское обсуждение, лучше подходящее для сопровождающих.

При всем уважении, то, что вы написали, не имеет смысла. Зачем тому, кто создает библиотеку "только для браузера", проверять, существует ли объект окна? Можете ли вы назвать или указать на одну библиотеку во всем реестре NPM, которая делает это? Или вы говорите, что все те библиотеки, которые писали люди, написаны неправильно?

Или люди должны учитывать, что существует фреймворк под названием «Гэтсби», который в этом нуждается? Следует иметь возможность использовать Gatsby на том или ином конце, и эти концы должны быть ПОЛНОСТЬЮ развязаны. На самом деле это единственный момент. Ничего философского в этом нет.

По замыслу Gatsby - это генератор статических сайтов. Большая часть работы, которую он выполняет, выполняется вне браузера во время компиляции. Это не только инструмент «клиент» или «браузер».

Рендеринг на стороне сервера по определению выполняется на стороне «сервера», где «окно» не имеет значения.

Компиляция Gatsby выполняется с помощью Webpack, по умолчанию webpack не подключает переменную окна. По моему опыту, существует не только один способ адаптировать клиентские библиотеки для работы под webpack. Это приводит к тому, что сама конфигурация Gatsby не может предоставить простое одноразовое решение для исправления всех библиотек, зависящих от «окна».

FWIW Я думаю, имеет смысл разделить часть инструмента и обсудить, какая его часть мешает тому, что вы хотите сделать.