J'ai une page, /trial
, dont je veux m'assurer qu'elle est toujours visitée avec un paramètre d'itinéraire. Dans mon constructeur, je vérifie this.props.location.search
, et s'il est faux (vide) je veux naviguer vers /trial/?product=foobar
.
Voici mon code
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>
}
}
Cela fonctionne bien pendant le temps de développement, mais lorsque j'exécute gatsby build
j'obtiens
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
Salut @kevinmichaelchen
Webpack ne parvient pas à créer cela car window
n'est disponible que dans le navigateur et non pendant la construction.
Vous pouvez résoudre ce problème en déplaçant l'appel redirectIfNecessary
de constructor
à componentDidMount
place. De cette façon, il ne fonctionnera que du côté client et non pendant la construction.
Vous pouvez également le faire de manière déclarative dans votre fonction de rendu en incluant le composant Redirect from reach router
Je ferme cela pour l'instant car ce problème n'est pas spécifique à Gatsby, mais n'hésitez pas à rouvrir s'il y a autre chose.
Le dépôt des monades du navigateur utilisateur est une solution rapide pour cela!
Commentaire le plus utile
Salut @kevinmichaelchen
Webpack ne parvient pas à créer cela car
window
n'est disponible que dans le navigateur et non pendant la construction.Vous pouvez résoudre ce problème en déplaçant l'appel
redirectIfNecessary
deconstructor
àcomponentDidMount
place. De cette façon, il ne fonctionnera que du côté client et non pendant la construction.Vous pouvez également le faire de manière déclarative dans votre fonction de rendu en incluant le composant Redirect from reach router
Je ferme cela pour l'instant car ce problème n'est pas spécifique à Gatsby, mais n'hésitez pas à rouvrir s'il y a autre chose.