Gatsby: navigasi tidak berfungsi di gatsby build

Dibuat pada 12 Des 2018  ·  2Komentar  ·  Sumber: gatsbyjs/gatsby

Deskripsi

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>
  }
}

Harapan vs Realitas

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

Lingkungan Hidup

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

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 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.

Semua 2 komentar

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!

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

Apakah halaman ini membantu?
0 / 5 - 0 peringkat