Gatsby: WebpackError: ReferenceError: डॉक्यूमेंट परिभाषित नहीं है - IE चेक

को निर्मित 18 जून 2019 · 1टिप्पणी · स्रोत: gatsbyjs/gatsby

विवरण

मैंने हाल ही में const isIE = /*@cc_on!@*/ false || !!document.documentMode को एक चेक के रूप में यह देखने के लिए जोड़ा है कि क्या कोई उपयोगकर्ता इंटरनेट एक्सप्लोरर का उपयोग कर रहा है और सशर्त रूप से एक संदेश जोड़कर उन्हें आधुनिक ब्राउज़र (क्रोम / फ़ायरफ़ॉक्स) का उपयोग करने के लिए कह रहा है। हालांकि यह gatsby develop का उपयोग करके अपेक्षित रूप से काम करता है, यह gatsby build का उपयोग करने में विफल रहता है:

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

प्रजनन करने कि प्रक्रिया

gatsby build घोषणा करने के बाद परियोजना फ़ोल्डर के भीतर const isIE = /*@cc_on!@*/ false || !!document.documentMode चल रहा है और js फ़ाइलों में से एक में {isIE && ()} कॉन्स्टेंस पर चल रहा है। Gatsby develop उम्मीद के अनुसार ठीक काम करता है।

अपेक्षित परिणाम

यदि उपयोगकर्ता IE का उपयोग कर रहा है तो साइट त्रुटि के बिना बनाता है और सशर्त रूप से संदेश प्रदर्शित करता है

वास्तविक परिणाम

साइट gatsby build साथ बनाने में असमर्थ है लेकिन 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

वातावरण

  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

स्रोत

j-651

सबसे उपयोगी टिप्पणी

@ j-651 आप यह करना चाहते हैं "ब्राउज़र में।" इसके लिए एक प्रॉक्सी के रूप में, आप जीवन चक्र की घटनाओं ( componentDidMount ) या हुक ( useEffect ) का उपयोग कर सकते हैं।

कोड कुछ इस तरह दिख सकता है:

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

इस उत्तर को बंद करने के लिए जा रहे हैं - सवाल के लिए धन्यवाद!

DSchau 18 जून 2019

👍3 ❤1

>सभी टिप्पणियाँ