Gatsby: naviguer ne fonctionne pas dans gatsby build

Créé le 12 déc. 2018  ·  2Commentaires  ·  Source: gatsbyjs/gatsby

La description

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

Espérances CONTRE Réalité

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

Environnement

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

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

Tous les 2 commentaires

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!

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

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

theduke picture theduke  ·  3Commentaires

ferMartz picture ferMartz  ·  3Commentaires

dustinhorton picture dustinhorton  ·  3Commentaires

jimfilippou picture jimfilippou  ·  3Commentaires

Oppenheimer1 picture Oppenheimer1  ·  3Commentaires