Gatsby: WebpackError: ReferenceError: Dokument ist nicht definiert - IE-Prüfung

Erstellt am 18. Juni 2019 · 1Kommentar · Quelle: gatsbyjs/gatsby

Beschreibung

Ich habe kürzlich const isIE = /*@cc_on!@*/ false || !!document.documentMode hinzugefügt, um zu überprüfen, ob ein Benutzer den Internet Explorer verwendet, und unter bestimmten Bedingungen eine Nachricht hinzuzufügen, in der er aufgefordert wird, einen modernen Browser (Chrome / Firefox) zu verwenden. Während dies mit gatsby develop wie erwartet funktioniert, schlägt es mit gatsby build fehl, wobei Folgendes angegeben wird:

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

Schritte zum Reproduzieren

Führen Sie gatsby build im Projektordner aus, nachdem Sie const isIE = /*@cc_on!@*/ false || !!document.documentMode deklariert und die Konstante {isIE && ()} in einer der js-Dateien überprüft haben. Gatsby develop funktioniert wie erwartet.

Erwartetes Ergebnis

Die Site wird fehlerfrei erstellt und zeigt unter bestimmten Bedingungen eine Meldung an, wenn der Benutzer den IE verwendet

Tatsächliche Ergebnis

Site kann nicht mit gatsby build aber mit gatsby develop Ordnung.

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

Umgebung

  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

Quelle

j-651

Hilfreichster Kommentar

@ j-651 Sie möchten diese Prüfung "im Browser" durchführen. Als Proxy hierfür können Sie Lebenszyklusereignisse ( componentDidMount ) oder Hooks ( useEffect ) verwenden.

Der Code könnte ungefähr so aussehen:

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

Ich werde dies als beantwortet schließen - danke für die Frage!

DSchau am 18. Juni 2019

👍3 ❤1

>Alle Kommentare