Gatsby: WebpackError: ReferenceError: le document n'est pas défini - vérification IE

Créé le 18 juin 2019 · 1Commentaire · Source: gatsbyjs/gatsby

La description

J'ai récemment ajouté const isIE = /*@cc_on!@*/ false || !!document.documentMode pour vérifier si un utilisateur utilise Internet Explorer et ajouter conditionnellement un message lui demandant d'utiliser un navigateur moderne (Chrome / Firefox). Bien que cela fonctionne comme prévu en utilisant gatsby develop , il échoue en utilisant gatsby build indiquant:

error Building static HTML failed
WebpackError: ReferenceError: document is not defined

Étapes à suivre pour reproduire

Exécution de gatsby build dans le dossier du projet après avoir déclaré const isIE = /*@cc_on!@*/ false || !!document.documentMode et avoir vérifié le const {isIE && ()} dans l'un des fichiers js. Gatsby develop fonctionne bien comme prévu.

Résultat attendu

Le site se construit sans erreur et affiche un message conditionnel si l'utilisateur utilise IE

Résultat actuel

Site impossible à construire avec gatsby build mais bien avec gatsby develop .

WebpackError: ReferenceError: document is not defined
  - header.js:20 Module../src/components/header.js
    lib/src/components/header.js:20:27
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  - sync-requires.js:8 Object../.cache/sync-requires.js
    lib/.cache/sync-requires.js:8:58
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  - static-entry.js:9 Module../.cache/static-entry.js
    lib/.cache/static-entry.js:9:22
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  - bootstrap:83 
    lib/webpack/bootstrap:83:1
  - universalModuleDefinition:3 webpackUniversalModuleDefinition
    lib/webpack/universalModuleDefinition:3:1
  - universalModuleDefinition:10 Object.<anonymous>
    lib/webpack/universalModuleDefinition:10:2
  - static-entry.js:84 Module._compile
    lib/.cache/static-entry.js:84:3
  - static-entry.js:101 Object.Module._extensions..js
    lib/.cache/static-entry.js:101:9

Environnement

  System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 75.0.3770.90
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.9.0 => 2.9.0 
    gatsby-image: ^2.1.3 => 2.1.3 
    gatsby-plugin-google-analytics: ^2.0.21 => 2.0.21 
    gatsby-plugin-hotjar: ^1.0.1 => 1.0.1 
    gatsby-plugin-manifest: ^2.1.1 => 2.1.1 
    gatsby-plugin-offline: ^2.1.1 => 2.1.1 
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12 
    gatsby-plugin-sass: ^2.0.11 => 2.0.11 
    gatsby-plugin-sharp: ^2.1.3 => 2.1.3 
    gatsby-plugin-sitemap: ^2.1.0 => 2.1.0 
    gatsby-remark-external-links: 0.0.4 => 0.0.4 
    gatsby-source-contentful: ^2.0.69 => 2.0.69 
    gatsby-source-filesystem: ^2.0.39 => 2.0.39 
    gatsby-transformer-remark: ^2.3.12 => 2.3.12 
    gatsby-transformer-sharp: ^2.1.21 => 2.1.21 
  npmGlobalPackages:
    gatsby-cli: 2.6.7

question or discussion

Source

j-651

Commentaire le plus utile

@ j-651 vous voudrez faire cette vérification "dans le navigateur". En tant que proxy pour cela, vous pouvez utiliser des événements de cycle de vie ( componentDidMount ) ou des hooks ( useEffect ).

Le code pourrait ressembler à ceci:

import React, { useState, useEffect } from 'react'

function Something() {
  const [isIE, setIsIE] = useState(false)
  useEffect(() => {
    setIsIE(/*@cc_on!@*/ false || !!document.documentMode)
  }, [])

  return (
    <p>{isIE ? 'Internet Explorer' : 'Not IE'}</p>
  )
}

export default Something

Va fermer ceci comme répondu - merci pour la question!

DSchau le 18 juin 2019

👍3 ❤1

>Tous les commentaires

Le code pourrait ressembler à ceci:

import React, { useState, useEffect } from 'react'

function Something() {
  const [isIE, setIsIE] = useState(false)
  useEffect(() => {
    setIsIE(/*@cc_on!@*/ false || !!document.documentMode)
  }, [])

  return (
    <p>{isIE ? 'Internet Explorer' : 'Not IE'}</p>
  )
}

export default Something

Va fermer ceci comme répondu - merci pour la question!

DSchau le 18 juin 2019

👍3 ❤1

Cette page vous a été utile?

0 / 5 - 0 notes