Gatsby: navegar no funciona en gatsby build

Creado en 12 dic. 2018  ·  2Comentarios  ·  Fuente: gatsbyjs/gatsby

Descripción

Tengo una página, /trial , que quiero asegurarme de que siempre se visite con un parámetro de ruta. En mi constructor, verifico this.props.location.search , y si es falso (vacío) quiero navegar a /trial/?product=foobar .

Aqui esta mi codigo

import React from 'react'
import { navigate } from 'gatsby'

class Foobar extends React.Component {
  constructor(props) {
    super(props)
    this.redirectIfNecessary()
  }

  redirectIfNecessary() {
    // Make prospect the default product
    const { location } = this.props
    const { search } = location
    if (!search) {
      navigate('/trial/?product=foobar', {
        state: {
          product: 'foobar',
        },
      })
    }
  }

  render() {
    return <div>Hello, world</div>
  }
}

Expectativas vs Realidad

Esto funciona bien durante el tiempo de desarrollo, pero cuando ejecuto gatsby build obtengo

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  186 | 
  187 | var navigate = function navigate(to, options) {
> 188 |   window.___navigate(withPrefix(to), options);
      | ^
  189 | };
  190 | 
  191 | exports.navigate = navigate;


  WebpackError: ReferenceError: window is not defined

Medio ambiente

gatsby info --clipboard

  System:
    OS: macOS 10.14.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.3.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Firefox: 63.0.3
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.0.64 => 2.0.64 
    gatsby-image: ^2.0.20 => 2.0.22 
    gatsby-plugin-manifest: ^2.0.10 => 2.0.11 
    gatsby-plugin-offline: ^2.0.19 => 2.0.19 
    gatsby-plugin-react-helmet: ^3.0.4 => 3.0.4 
    gatsby-plugin-react-svg: ^2.0.0 => 2.0.0 
    gatsby-plugin-sass: ^2.0.7 => 2.0.7 
    gatsby-plugin-sharp: ^2.0.15 => 2.0.15 
    gatsby-source-filesystem: ^2.0.11 => 2.0.11 
    gatsby-transformer-sharp: ^2.1.8 => 2.1.9 
  npmGlobalPackages:
    gatsby-cli: 2.4.6
question or discussion

Comentario más útil

Hola @kevinmichaelchen

Webpack no puede compilar esto porque window solo está disponible en el navegador y no durante el tiempo de compilación.

Puede arreglar esto moviendo la llamada redirectIfNecessary de constructor a componentDidMount lugar. De esa manera, solo se ejecutará en el lado del cliente y no durante el tiempo de compilación.

También puede hacer esto de forma declarativa en su función de render al incluir el componente Redirect from reach router

Estoy cerrando esto por ahora ya que este problema no es específico de Gatsby, pero siéntase libre de volver a abrirlo si hay algo más.

Todos 2 comentarios

Hola @kevinmichaelchen

Webpack no puede compilar esto porque window solo está disponible en el navegador y no durante el tiempo de compilación.

Puede arreglar esto moviendo la llamada redirectIfNecessary de constructor a componentDidMount lugar. De esa manera, solo se ejecutará en el lado del cliente y no durante el tiempo de compilación.

También puede hacer esto de forma declarativa en su función de render al incluir el componente Redirect from reach router

Estoy cerrando esto por ahora ya que este problema no es específico de Gatsby, pero siéntase libre de volver a abrirlo si hay algo más.

El repositorio de mónadas del navegador de usuario es una solución rápida para esto.

https://www.npmjs.com/package/browser-monads

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

dustinhorton picture dustinhorton  ·  3Comentarios

ferMartz picture ferMartz  ·  3Comentarios

rossPatton picture rossPatton  ·  3Comentarios

3CordGuy picture 3CordGuy  ·  3Comentarios

totsteps picture totsteps  ·  3Comentarios