Ich habe eine Seite, /trial
, die ich sicherstellen möchte, dass sie immer mit einem Routenparameter besucht wird. In meinem Konstruktor überprüfe ich this.props.location.search
und wenn es falsch (leer) ist, möchte ich zu /trial/?product=foobar
navigieren.
Hier ist mein 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>
}
}
Dies funktioniert gut während der Entwicklungszeit, aber wenn ich gatsby build
laufen lasse, bekomme ich
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
Hey @kevinmichaelchen
Webpack kann dies nicht erstellen, da window
nur im Browser und nicht während der Erstellungszeit verfügbar ist.
Sie können dies beheben, indem Sie stattdessen den Anruf redirectIfNecessary
von constructor
auf componentDidMount
. Auf diese Weise wird es nur auf der Clientseite und nicht während der Erstellungszeit ausgeführt.
Sie können dies auch deklarativ in Ihrer Renderfunktion tun, indem Sie die Redirect-Komponente vom Reach-Router einschließen
Ich schließe dies vorerst, da dieses Problem nicht spezifisch für Gatsby ist, aber Sie können es gerne wieder öffnen, wenn es noch etwas gibt.
User Browser Monaden Repo als schnelle Lösung dafür!
Hilfreichster Kommentar
Hey @kevinmichaelchen
Webpack kann dies nicht erstellen, da
window
nur im Browser und nicht während der Erstellungszeit verfügbar ist.Sie können dies beheben, indem Sie stattdessen den Anruf
redirectIfNecessary
vonconstructor
aufcomponentDidMount
. Auf diese Weise wird es nur auf der Clientseite und nicht während der Erstellungszeit ausgeführt.Sie können dies auch deklarativ in Ihrer Renderfunktion tun, indem Sie die Redirect-Komponente vom Reach-Router einschließen
Ich schließe dies vorerst, da dieses Problem nicht spezifisch für Gatsby ist, aber Sie können es gerne wieder öffnen, wenn es noch etwas gibt.