Gatsby: WebpackError: ReferenceError: لم يتم تعريف المستند - فحص IE

تم إنشاؤها على ١٨ يونيو ٢٠١٩ · 1تعليق · مصدر: gatsbyjs/gatsby

وصف

لقد أضفت مؤخرًا const isIE = /*@cc_on!@*/ false || !!document.documentMode كشيك لمعرفة ما إذا كان المستخدم يستخدم Internet Explorer وأضفت رسالة تطلب منه استخدام متصفح حديث (Chrome / Firefox) بشروط. بينما يعمل هذا كما هو متوقع باستخدام gatsby develop ، فإنه يفشل في استخدام gatsby build تفيد:

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

خطوات التكاثر

تشغيل gatsby build داخل مجلد المشروع بعد التصريح عن const isIE = /*@cc_on!@*/ false || !!document.documentMode وتشغيل فحص على const {isIE && ()} في أحد ملفات js. 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 في ١٨ يونيو ٢٠١٩

👍3 ❤1

>كل التعليقات

يمكن أن يبدو الرمز كما يلي:

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 في ١٨ يونيو ٢٠١٩

👍3 ❤1

هل كانت هذه الصفحة مفيدة؟

0 / 5 - 0 التقييمات