Saya memiliki halaman, /trial
, yang ingin saya pastikan selalu dikunjungi dengan parameter rute. Di konstruktor saya, saya memeriksa this.props.location.search
, dan jika salah (kosong) saya ingin menavigasi ke /trial/?product=foobar
.
Ini kode saya
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>
}
}
Ini berfungsi dengan baik selama waktu dev, tetapi ketika saya menjalankan gatsby build
saya dapatkan
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
Hei @evinichaelchen
Webpack gagal membangun ini karena window
hanya tersedia di browser dan tidak selama waktu pembuatan.
Anda dapat memperbaikinya dengan memindahkan panggilan redirectIfNecessary
dari constructor
ke componentDidMount
. Dengan begitu, ini hanya akan berjalan di sisi klien dan tidak selama waktu pembuatan.
Anda juga dapat melakukan ini secara deklaratif dalam fungsi render Anda dengan menyertakan komponen Redirect dari router jangkauan
Saya menutup ini untuk saat ini karena masalah ini tidak khusus untuk Gatsby tetapi silakan buka kembali jika ada hal lain.
Repo monads browser pengguna sebagai perbaikan cepat untuk ini!
Komentar yang paling membantu
Hei @evinichaelchen
Webpack gagal membangun ini karena
window
hanya tersedia di browser dan tidak selama waktu pembuatan.Anda dapat memperbaikinya dengan memindahkan panggilan
redirectIfNecessary
dariconstructor
kecomponentDidMount
. Dengan begitu, ini hanya akan berjalan di sisi klien dan tidak selama waktu pembuatan.Anda juga dapat melakukan ini secara deklaratif dalam fungsi render Anda dengan menyertakan komponen Redirect dari router jangkauan
Saya menutup ini untuk saat ini karena masalah ini tidak khusus untuk Gatsby tetapi silakan buka kembali jika ada hal lain.