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>
}
}
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
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
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.
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
deconstructor
acomponentDidMount
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.