Gatsby: A janela não está definida

Sim, durante o desenvolvimento, os componentes de reação são executados apenas no navegador em que window está definido. Ao construir, Gatsby renderiza esses componentes no servidor onde window não está definido. Geralmente com React a solução para isso é apenas acessar window em componentDidMount ou verificar se window existe antes de acessá-lo. Para bibliotecas de terceiros que não fazem isso, o que você fez parece ótimo.

@KyleAMathews Não consigo fazer componentDidMount disparar em html.js ou _template.jsx usando gatsby develop , talvez não seja suposto, ou estou fazendo Algo errado?

@hitchcott você pode compartilhar um pouco mais sobre sua construção? Acabei de instalar o semantic-ui em um projeto gatsby, mas meu CSS não está funcionando. Não tenho certeza de como carregar o CSS na minha página. React é supor que os estilos in-line estão corretos, mas como ele sabe sobre eles? Também suponho que devo configurar o webpack para fazer a compilação LESS em vez de gulp. Você acabou de instalar o webpack-lessloader?

@Maxhodges - É o Webpack, não o React, que “conhece” seus estilos. Webpack sabe porque você importa ou exige os arquivos compilados em algum lugar dos arquivos JS que são agrupados.

Por exemplo, eu importo meu styles.css no arquivo _template.js , portanto, quando o Webpack cria o pacote, ele inclui esses estilos - embutidos quando em modo de desenvolvimento; arquivo referenciado externo quando em produção ( veja cssLink aqui para um exemplo ).

Não há necessidade de um carregador LESS adicional, pois Gatsby já inclui um em sua configuração Webpack padrão .

para aqueles de vocês que seguiram as instruções na página Gatsby GitHub para instalar o docs-site ...
import { colors } from 'utils/colors'
é o criador de problemas e depois de comentar isso e $ {colors.bg} o site se desenvolveu muito bem.

Seria possível mostrar uma mensagem de erro melhor quando isso acontecer? Não tenho ideia de onde encontrar o erro.

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.

Essa é uma ideia muito boa! Atualmente pressionando fortemente 1.0, então não vou conseguir isso
em breve, mas por agora, basta abrir public / render-page.js para o número da linha
indicado lá (44529) e veja qual código está causando problemas.

Na quarta-feira, 17 de maio de 2017 às 11h45 Thomas Seberechts [email protected]
escreveu:

Seria possível mostrar uma mensagem de erro melhor quando isso acontecer? eu
não tenho ideia de onde encontrar o erro.

Falha ao gerar HTML

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
jogue err;
^
Erro: ReferenceError: janela não definida
em Object.defineProperty.value (render-page.js: 44529: 79)
em __webpack_require__ (render-page.js: 30: 30)
em Object.exports .__ esModule (render-page.js: 42560: 24)
em __webpack_require__ (render-page.js: 30: 30)
em Object.defineProperty.value (render-page.js: 42533: 51)
em __webpack_require__ (render-page.js: 30: 30)
em Object.(render-page.js: 80: 19)
em __webpack_require__ (render-page.js: 30: 30)
em Object.assign.i (render-page.js: 50: 18)
em render-page.js: 53: 10
erro O comando falhou com o código de saída 1.

-
Você está recebendo isso porque foi mencionado.

Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/gatsbyjs/gatsby/issues/309#issuecomment-302041105 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/AAEVh6E9bZyyi0iX-Q7Q92VTvEb1DZbmks5r6sHGgaJpZM4Isiea
.

Isso funcionou! Valeu.

Dica: coloque typeof window !== 'undefined' && window.whaterver-you-need para resolver isso.

o erro desapareceu ao usar componetDidMount

Eu tenho um problema semelhante, mas estou usando localStorage para persistir um pouco do meu estado redux no navegador. Como faço para contornar esse problema se não consigo usar window.localStorage no arquivo store.js?

😢

Obrigado!

@gregorskii

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

então, windowGlobal.localStorage

Sim, isso funcionou, mas eu tive que simular o armazenamento local usando https://www.npmjs.com/package/localstorage-memory :

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

Usando https://www.npmjs.com/package/redux-localstorage.

acesse apenas window em componentDidMount

Síntese para terceiros 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() {
    // ...
  }
}

// ...

A sugestão de

WebpackError: Elemento não definido

Colocar as importações dentro de componentDidMount funcionou.

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

Sim, durante o desenvolvimento, os componentes de reação são executados apenas no navegador onde a janela é definida. Ao construir, Gatsby renderiza esses componentes no servidor onde a janela não está definida. Geralmente, com o React, a solução para isso é apenas acessar a janela em componentDidMount ou verificar se a janela existe antes de acessá-la. Para bibliotecas de terceiros que não fazem isso, o que você fez parece ótimo.

Seria muito útil trazer à tona isso cedo / proeminentemente. Estou tentando construir pela primeira vez e há muitos problemas que preciso corrigir agora, pois não sabia que isso se tornaria um problema. É particularmente estressante porque preciso implantar isso com urgência; Estou enviando uma proposta de algo e preciso que o site esteja online.

Estou apenas tentando implantar no Github Pages (por enquanto, pelo menos) e, portanto, não preciso do SSR. Existe uma maneira de construir apenas para clientes?

Parece que com Gatsby v2, você precisa escolher entre as importações de es6 e commonjs, você não poderá mais misturá-las por motivos relacionados com o webpack 4.

Sendo esse o caso, e assumindo que você já está usando importações es6, parece que a solução de @jfaeldon é a que deve ser usada aqui e a de @hitchcott não funcionará mais.

Alguém pode confirmar isso?

@joshwcomeau concordo totalmente com você, também não acho uma boa ideia rodar dev no navegador apenas e construir em node.js. A diferença é tão grande, e como no ambiente DEV e PROD você deseja tornar os ambientes o mais semelhantes possível, acho que o gatsby deve fazer o mesmo, executar o dev e o build em um ambiente o mais semelhante possível.

então posso fazê-lo rodar no navegador? Eu não preciso de SSR.

Oi,
Estou tendo o mesmo problema aqui, Coverflow funciona bem para gatsby Develop, mas para build gera um erro:
WebpackError: a janela não está definida

     - 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

importar Coverflow de 'react-coverflow';
import {StyleRoot} de 'radium'

class Team extends React.Component {

render () {
Retorna(

displayQuantityOfSide = {2}
navegação
Rolagem infinita
enableHeading
ativo = {0}
media = {{
' @media (max-width: 720px)': {
largura: '100%',
altura: '200px'
},
' @media (min-width: 720px)': {
largura: '100%',
altura: '400px',
}
}}
>

  </Coverflow>
</StyleRoot>
)

}
}

exportar equipe padrão;

Recebi este erro depois de instalar alguns pacotes, então deve estar em um deles - mas não consigo encontrar onde está o problema. Alguém tem dicas sobre como descobrir melhor qual pacote npm pode ser? O erro é frustrantemente genérico.

talvez a implementação do react seja melhor?
https://react.semantic-ui.com/ e https://github.com/pretzelhands/gatsby-starter-semantic-ui

@wmlutz, a explicação mais simples que posso oferecer é, é porque quando você emite gatsby develop para construir o projeto em que está trabalhando em desenvolvimento, ou gatsby build && gatsby serve para uma construção de produção, Gatsby irá gerar internamente as páginas e os css, links e assim por diante. Mas uma coisa a ter em mente é que isso é feito no lado do servidor, no lado do nó, não no lado do cliente. Portanto, o nó não tem acesso a essas apis específicas, pois elas são apenas para uso do cliente. E com isso alguns pacotes não vão funcionar bem com Gatsby fora da caixa. Algumas mudanças podem ser necessárias para fazê-los "jogarem bem"

@jonniebigodes - Obrigado por isso. Acho que entendo o _porquê_ agora. Minha coisa agora é o _what_. Eu estupidamente fiz uma tonelada de trabalho e estou tendo problemas para isolar qual pacote está causando o problema. Não há como gatsby build com alguns relatórios de erros mais detalhados?

@jonniebigodes - Eu descobri o pacote que está causando o problema: reaja brindes . Meu próximo problema é descobrir como consertá-lo.

_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 algo como o bloco de código abaixo. react é carregado depois que o pacote estático inicial é recebido. Assim, quando o usuário atingir _handleSubmit window já existirá.

Observe que, se react toasts chamar window em import , você ainda poderá ter o erro.

_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)
    }
  }

O mesmo problema. Vou encontrar outra biblioteca do Toast ou fazer a minha própria. Não deveria me matar.

@ joserocha3 esse pedaço de código só funcionará no modo de desenvolvimento. Quando uma chamada para uma construção de produção é emitida, isso falhará durante o estágio error Building static HTML failed . Como Gatsby fará uma introspecção das importações e com essa aparência para o pacote em questão, ele falhará porque este está usando algumas apis não nativas de node.js e @wmlutz, o código para esse pacote é bastante simples e não deve dar muito trabalho para se ajustar ao seu caso. Por que não bifurcar o repo, verificar o código e criar um conjunto de componentes que funcionará para você?

Eu concordo com @jonniebigodes sobre bifurcação. A origem do repo são apenas alguns arquivos. A chamada ofensiva é uma referência de document em ToastsContainer.tsx .

Ou tente https://github.com/gatsbyjs/gatsby/issues/309#issuecomment -387039877 mencionado acima.

A causa é como o modo estrito, o UMD e o agrupamento funcionam.

A bifurcação não é necessária se você usar patch-package .

Consulte também https://github.com/webpack/webpack/issues/6677 e os problemas vinculados.

Depende do código tgat que você usa e se eles fazem as verificações adequadas ou usam o alvo umd e definem os objetos globais.

Olá pessoal ainda está tendo o mesmo problema, eu não usei nenhuma função de janela no meu projeto, mas ainda está gerando o mesmo erro por que estou tendo este ..?

1:09:03: Construir pronto para começar
11:09:05 AM: versão da imagem construída: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
11h09h05: tag de imagem de construção: v3.3.2
11:09:05: versão do buildbot: 75cd99f62ada9e21edea53208e8baf0eab85a045
11:09:06: Buscando dependências em cache
11:09:06: Iniciando o download do cache de 194,6 MB
11:09:07: download do cache concluído em 1.636969993s
11:09:07: Iniciando a extração do cache
11:09:17: Extração do cache concluída em 9.693656527s
11:09:17: Busca de cache concluída em 11.478174001s
11:09:17: Começando a preparar o repo para compilação
11:09:17: Preparando Git Reference pull / 21 / head
11:09:18 AM: netlify.toml encontrado. Substituindo a configuração do site
11:09:18: Iniciando o script de compilação
11:09:18: Instalando dependências
11:09:19: Iniciada a restauração da versão do nó em cache
11:09:22 AM: Concluída a restauração da versão do nó em cache
11:09:23 AM: v10.16.0 já está instalado.
11:09:24: Agora usando o nó v10.16.0 (npm v6.9.0)
11:09:25: Tentativa de ruby ​​versão 2.6.2, leitura do ambiente
11:09:27: Usando ruby ​​versão 2.6.2
11:09:27: Usando PHP versão 5.6
11:09:27: Iniciada a restauração de módulos de nó em cache
11:09:27 AM: Concluída a restauração de módulos de nó em cache
11:09:27: Início da restauração do cache de fios em cache
11:09:27: Concluída a restauração do cache de fios em cache
11:09:28: Instalando módulos NPM usando Yarn versão 1.9.4
11:09:29 AM: instalação do yarn v1.9.4
11:09:29 AM: pacote de aviso.json: nenhum campo de licença
11:09:29 AM: pacote de aviso-lock.json encontrado. Seu projeto contém arquivos de bloqueio gerados por ferramentas diferentes do Yarn. É aconselhável não misturar gerenciadores de pacotes para evitar inconsistências de resolução causadas por arquivos de bloqueio não sincronizados. Para limpar esse aviso, remova package-lock.json.
11:09:29: aviso [email protected]: Sem campo de licença
11:09:29: [1/4] Resolvendo pacotes ...
11:09:31 AM: [2/4] Buscando pacotes ...
11:09:31 AM: (nó: 1201) [DEP0005] Aviso de descontinuação: Buffer () foi descontinuado devido a problemas de segurança e usabilidade. Use os métodos Buffer.alloc (), Buffer.allocUnsafe () ou Buffer.from ().
11h10:04: info [email protected]: A plataforma "linux" é incompatível com este módulo.
11h10:04: info "[email protected]" é uma dependência opcional e falha na verificação de compatibilidade. Excluindo-o da instalação.
11h10:04: [3/4] Vinculando dependências ...
11h10:04: aviso "gatsby> [email protected]" tem dependência de pares incorreta "graphql@^0.12.0 || ^ 0.13.0".
11h10:04: aviso "gatsby> [email protected]" tem dependência de pares incorreta "graphql@^0.10.0 || ^ 0.11.0 || ^ 0.12.0 || ^ 0.13.0".
11h10:04: aviso "gatsby> [email protected]" tem dependência de peer incorreta "graphql@^0.13.0".
11h10:04: aviso "gatsby-plugin-netlify> [email protected]" não atendeu a dependência de pares "webpack @> = 4.4.0".
11h10:04: aviso "gatsby-plugin-sass> [email protected]" não atendeu a dependência de pares "webpack@^3.0.0 || ^ 4.0.0".
11h10:04: aviso "> [email protected]" não atendeu a dependência de pares "webpack@^2.0.0 || ^ 3.0.0 || ^ 4.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "immutable@^3.7.6".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "netlify-cms-lib-auth@^2.0.4".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "netlify-cms-lib-util@^2.1.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "netlify-cms-ui-default@^2.0.6".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de par não atendida "react-emotion@^9.2.6".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de peer não atendida "immutable@^3.7.6".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de par não atendida "netlify-cms-lib-auth@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de par não atendida "netlify-cms-lib-util@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-emotion@^9.2.6".
11h10:04: aviso "netlify-cms> [email protected]" não atende a dependência de pares "netlify-cms-lib-auth@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "netlify-cms-lib-util@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-emotion@^9.2.6".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "immutable@^3.7.6".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "netlify-cms-lib-auth@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de par não atendida "netlify-cms-lib-util@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-emotion@^9.2.6".
11h10:04: aviso "netlify-cms> [email protected]" não atende a dependência de pares "immutable@^3.8.2".
11h10:04: aviso "netlify-cms> [email protected]" não atende à dependência de pares "netlify-cms-lib-util@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" não atende a dependência de pares "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-emotion@^9.2.6".
11h10:04: aviso "netlify-cms> [email protected]" não atende a dependência de pares "react-immutable-proptypes@^2.1.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de par não atendida "netlify-cms-lib-util@^2.0.4".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-immutable-proptypes@^2.1.0".
11h10:04: aviso "netlify-cms> [email protected]" não atende à dependência de pares "moment@^2.11.2".
11h10:04: aviso "netlify-cms> [email protected]" não atende a dependência de pares "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-emotion@^9.2.6".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "immutable@^3.7.6".
11h10:04: aviso "netlify-cms> [email protected]" não atende a dependência de pares "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-emotion@^9.2.6".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-immutable-proptypes@^2.1.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "immutable@^3.7.6".
11h10:04: aviso "netlify-cms> [email protected]" não atende à dependência de pares "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-emotion@^9.2.6".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "immutable@^3.7.6".
11h10:04: aviso "netlify-cms> [email protected]" não atende a dependência de pares "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-emotion@^9.2.6".
11h10:04: aviso "netlify-cms> [email protected]" não atende a dependência de pares "react-immutable-proptypes@^2.1.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-immutable-proptypes@^2.1.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "immutable@^3.7.6".
11h10:04: aviso "netlify-cms> [email protected]" não atende à dependência de pares "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-emotion@^9.2.5".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-immutable-proptypes@^2.1.0".
11h10:04: aviso "netlify-cms> [email protected]" não atende a dependência de pares "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "immutable@^3.7.6".
11h10:04: aviso "netlify-cms> [email protected]" não atende a dependência de pares "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-emotion@^9.2.6".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-immutable-proptypes@^2.1.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "immutable@^3.7.6".
11h10:04: aviso "netlify-cms> [email protected]" não atende à dependência de pares "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-emotion@^9.2.5".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "immutable@^3.7.6".
11h10:04: aviso "netlify-cms> [email protected]" não atende à dependência de pares "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" tem dependência de pares não atendida "react-immutable-proptypes@^2.1.0".
11h10:04: aviso "netlify-cms> [email protected]" não atendeu a dependência de pares "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> [email protected]" não atende a dependência de pares "netlify-cms-ui-default@^2.0.0".
11h10:04: aviso "netlify-cms> netlify-cms-widget-date> [email protected]" tem dependência de peer não atendida "moment @> = 2.16.0".
11h10:04: aviso "netlify-cms> netlify-cms-widget-markdown> [email protected]" tem dependência de peer não atendida "imutável @> = 3.8.1".
11h10:04: aviso "netlify-cms> netlify-cms-widget-markdown> [email protected]" tem dependência de pares não atendida "immutable@^3.8.2".
11h10:04: aviso "netlify-cms> netlify-cms-widget-markdown> [email protected]" tem dependência de peer incorreta "slate@^0.32.0".
11h10:04: aviso "netlify-cms> netlify-cms-widget-markdown> [email protected]" tem dependência de pares não atendida "immutable@^3.8.1".
11h10:04: aviso "netlify-cms> netlify-cms-widget-markdown> [email protected]" tem dependência de peer incorreta "slate@^0.33.3".
11h10:04: aviso "netlify-cms> netlify-cms-widget-markdown> [email protected]" tem dependência de pares não atendida "slate-schema-violations@^0.1.7".
11h10:04: aviso "netlify-cms> netlify-cms-widget-markdown> [email protected]" tem dependência de peer não atendida "imutável @> = 3.8.1".
11h10:04: aviso "netlify-cms> netlify-cms-widget-markdown> [email protected]" não atendeu a dependência de pares "imutável @> = 3.8.1".
11h10:04: aviso "netlify-cms> netlify-cms-core> redux-notificações> [email protected]" tem dependência de pares incorreta "redux@^2.0.0 || ^ 3.0.0".
11h10:04: aviso "netlify-cms> netlify-cms-widget-markdown> slate-react> [email protected]" tem dependência de peer não atendida "imutável @> = 3.8.1".
11h10:04: aviso "> [email protected]" tem dependência de peer incorreta "react@^16.8.3".
11h10:21: [4/4] Construindo novos pacotes ...
11h10:26: concluído em 56.59s.
11:10:26: Módulos NPM instalados usando Yarn
11h10:26: pacote de aviso.json: nenhum campo de licença
11h10:26: Início da restauração do cache go em cache
11h10:26: Concluída a restauração do cache go em cache
11h10min27s: não definido GOOS;
11h10min27s: não definido GOARCH;
11h10:27: export GOROOT = '/ opt / buildhome / .gimme / versions / go1.12.linux.amd64';
11h10:27: export PATH = "/ opt / buildhome / .gimme / versions / go1.12.linux.amd64 / bin: $ {PATH}";
11h10:27: versão ir> & 2;
11h10:27: export GIMME_ENV = '/ opt / buildhome / .gimme / env / go1.12.linux.amd64.env';
11h10:27: go versão go1.12 linux / amd64
11h10:27: Instalando comandos ausentes
11h10:27: verificar o diretório de execução
11h10:27: Executando o comando do usuário: npm run build
11h10:27:> [email protected] build / opt / build / repo
11h10:27:> compilação run-p: **
11h10:28:> [email protected] build: app / opt / build / repo
11:10:28:> npm execute clean && gatsby build
11h10:28:> [email protected] clean / opt / build / repo
11h10min28s:> rimraf .cache público
11h10:32: Usando a configuração do ambiente: 'produção'
11h10min32s: abertura e validação de gatsby-configs com sucesso - 0,059 s
11h10min32s: carregamento de plug-ins com sucesso - 0,454 s
11h10min34s: sucesso onPreInit - 1,665 s
11h10:34: sucesso na exclusão de arquivos html e css de compilações anteriores - 0,008 s
11h10min34s: cache de inicialização com sucesso - 0,011 s
11h10:34: cópia bem-sucedida de arquivos gatsby - 0,035 s
11h10:34: sucesso no Pré-boot - 0,009 s
11h10:51: fonte de sucesso e nós de transformação - 17.231 s
11h10:52: esquema de construção de sucesso - 0,896 s
11h10:55: sucesso na criação de páginas - 2.772 s
11h10:55: sucesso na criação de páginasStatefully - 0,062 s
11h10:55: sucesso emPreExtractQueries - 0,006 s
11h10m56: esquema de atualização bem-sucedido - 0,712 s
11h10:56: consultas de extração bem-sucedidas de componentes - 0,166 s
11h10:57: consultas do Graphql bem-sucedidas - 1,068 s - 1460/1460 1368,43 consultas / segundo
11h10min57s: gravação bem-sucedida dos dados da página - 0,035 s
11h10:57: gravação bem-sucedida de dados de redirecionamento - 0,001 s
11:10:57: sucesso no PostBootstrap - 0,010 s
11h10min57s: bootstrap de informações concluído - 28,304 s
11h12:14: sucesso Criação de pacotes de produção de JavaScript e CSS - 76.329 s
11h12:14:
11h12:14: gatsby-plugin-purgecss:
11:12:14: Tamanho CSS anterior: 305,33 KB
11:12:14: Novo CSS Tamanho: 305,33 KB (-0,00%)
11:12:14: Removido ~ 0,00 KB de CSS
11:12:14:
11h12:23: erro Falha ao construir HTML estático
11:12:23: Veja nossa página de documentos sobre depuração de compilações HTML para obter ajuda https://gatsby.app/debug-html
11h12:23: 48 | window.YouTubeIframeLoader = YouTubeIframeLoader;
11h12:23: 49 | }
11h12:23:> 50 | }(janela));
11h12:23: | ^
11h12:23: 51 |
11:12:23 AM:
11:12:23 AM: WebpackError: ReferenceError: janela não definida
11:12:23 AM:
11h12:23: - index.js: 50 Object ../ node_modules / youtube-iframe / index.js
11h12:23: [lib] / [youtube-iframe] /index.js:50:2
11:12:23 AM:
11h12:23: - bootstrap: 19 __webpack_require__
11h12min23s: lib / webpack / bootstrap: 19 : 1
11:12:23 AM:
11h12:23: - MediaAutoTrack.js: 15 Object ../ node_modules / @ aws-amplify / analytics / lib / Provid ers / AmazonPersonalizeHelper / MediaAutoTrack.js
11h12:23: [lib] / [@ aws-amplify] / analytics / lib / Providers / AmazonPersonalizeHelper / MediaAu toTrack.js: 15: 27
11:12:23 AM:
11h12min23s: - bootstrap: 19 __webpack_require__
11h12min23s: lib / webpack / bootstrap: 19 : 1
11:12:23 AM:
11h12:23: - index.js: 7 Object ../ node_modules / @ aws-amplify / analytics / lib / Providers / Amazon PersonalizeHelper / index.js
11h12:23: [lib] / [@ aws-amplify] /analytics/lib/Providers/AmazonPersonalizeHelper/index.js:7:10
11:12:23 AM:
11h12min23s: - bootstrap: 19 __webpack_require__
11h12min23s: lib / webpack / bootstrap: 19 : 1
11:12:23 AM:
11h12:23: - AmazonPersonalizeProvider.js: 52 Object ../ node_modules / @ aws-amplify / analytics /lib/Providers/AmazonPersonalizeProvider.js
11h12:23: [lib] / [@ aws-amplify] /analytics/lib/Providers/AmazonPersonalizeProvider.js:52: 33
11:12:23 AM:
11h12min23s: - bootstrap: 19 __webpack_require__
11h12min23s: lib / webpack / bootstrap: 19 : 1
11:12:23 AM:
11h12:23: - index.js: 7 Objeto ../ node_modules / @ aws-amplify / analytics / lib / Providers / index. js
11h12:23: [lib] / [@ aws-amplify] /analytics/lib/Providers/index.js:7:35
11:12:23 AM:
11h12min23s: - bootstrap: 19 __webpack_require__
11h12min23s: lib / webpack / bootstrap: 19 : 1
11:12:23 AM:
11h12:23: - index.js: 33 Objeto ../ node_modules/@aws-amplify/analytics/lib/index.js
11h12:23: [lib] / [@ aws-amplify] /analytics/lib/index.js:33:10
11h12min24h: falha durante o estágio 'construção local': o script de construção retornou código de saída diferente de zero: 1
11:12:23 AM:
11h12:23: - bootstrap: 19 __webpack_require__
11h12min23s: lib / webpack / bootstrap: 19 : 1
11:12:23 AM:
11:12:24: Desligando o registro, 58 mensagens pendentes

Estou usando o netlify para o meu servidor

Se você tem certeza de que não está usando o Windows, provavelmente um pacote está.

Você tem que definir uma janela vazia no webpack.

Não é muito simples, mas isso o levará na direção certa:

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

Não tenho certeza de por que este problema foi encerrado? Este problema, na verdade, é provavelmente o mais crítico quando Gatsby está preocupado e toda a filosofia deve ser alterada e corrigida.

É muito ruim que o navegador e a lógica SSR estejam acoplados. Sem mencionar o fato de que você executa uma versão do código em desenvolvimento e divergência dela na produção. Isso é muito ruim. Por que você faria essas construções? A única diferença entre os dois deve ser a funcionalidade de depuração habilitada no desenvolvimento e, por exemplo, mapas de origem ou o que quer que seja. Isso realmente torna difícil e envolvente o uso de Gatsby.

Na minha opinião, você deve reabrir isso e priorizar esse assunto. Este problema faz as pessoas literalmente desistirem de milhares de módulos que dependem da janela e nem todos eles podem ser importados em componentDidMount, por exemplo, módulos do tipo HOC etc.

Embora eu não discorde, este é um ponto de dor. Alguém poderia argumentar que essas bibliotecas escritas com lógica em torno da variável de janela não são adequadas para uso de SSR. Essas próprias bibliotecas devem verificar se a janela está definida e funcionam no modo SSR.

Nenhum outro comentário ao ponto mais profundo que você está fazendo, essa é uma discussão filosófica mais adequada para os mantenedores.

Com todo o respeito, o que você escreveu não faz sentido. Por que alguém que está construindo uma biblioteca "apenas para navegador" verifica se o objeto janela existe? Você pode nomear ou apontar para uma única biblioteca em todo o registro do NPM que faça isso? Ou você está dizendo que todas as bibliotecas que as pessoas escreveram são escritas de forma errada?

Ou as pessoas deveriam considerar que existe uma estrutura chamada "Gatsby" que precisa disso? Deve-se ser capaz de usar Gatsby em uma ou outra extremidade e essas extremidades devem ser TOTALMENTE desacopladas. Este é o único ponto, realmente. Nada filosófico sobre isso.

Por design, Gatsby é um gerador estático de sites. A maior parte do trabalho que ele faz para conseguir isso é feito fora do navegador em tempo de compilação. Não é apenas uma ferramenta de “cliente” ou “navegador”.

A renderização do lado do servidor é, por definição, feita no lado do “servidor”, onde “janela” não é uma coisa.

A compilação de Gatsby é feita com Webpack, webpack por padrão não conecta uma variável de janela. Pela minha experiência, não há apenas uma maneira de adaptar as bibliotecas do cliente para trabalhar no webpack. Isso faz com que a própria configuração do Gatsby não seja capaz de fornecer uma solução única e simples para corrigir todas as bibliotecas que dependem da “janela”.

FWIW Acho que faz sentido separar a parte da ferramenta para discutir qual parte está impedindo o que você deseja fazer.