Gatsby: Navigieren Sie nicht in Gatsby Build

Erstellt am 12. Dez. 2018  ·  2Kommentare  ·  Quelle: gatsbyjs/gatsby

Beschreibung

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

Erwartungen gegen Realität

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

Umgebung

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

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

Alle 2 Kommentare

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!

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

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen