Gatsby: WebpackError: ReferenceError: dokumen tidak ditentukan - periksa IE

Dibuat pada 18 Jun 2019 · 1Komentar · Sumber: gatsbyjs/gatsby

Deskripsi

Saya baru-baru ini menambahkan const isIE = /*@cc_on!@*/ false || !!document.documentMode sebagai pemeriksaan untuk melihat apakah pengguna menggunakan Internet Explorer dan menambahkan pesan bersyarat yang meminta mereka untuk menggunakan browser modern (Chrome / Firefox). Meskipun ini berfungsi seperti yang diharapkan menggunakan gatsby develop , ini gagal menggunakan gatsby build menyatakan:

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

Langkah-langkah untuk mereproduksi

Menjalankan gatsby build dalam folder proyek setelah mendeklarasikan const isIE = /*@cc_on!@*/ false || !!document.documentMode dan menjalankan pemeriksaan pada const {isIE && ()} di salah satu file js. Gatsby develop berfungsi dengan baik seperti yang diharapkan.

Hasil yang diharapkan

Situs dibangun tanpa kesalahan dan menampilkan pesan secara bersyarat jika pengguna menggunakan IE

Hasil sebenarnya

Situs tidak dapat dibangun dengan gatsby build tetapi baik-baik saja dengan 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

Lingkungan Hidup

  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

Sumber

j-651

Komentar yang paling membantu

@ j-651 Anda ingin melakukan pemeriksaan ini "di browser." Sebagai proxy untuk ini, Anda dapat menggunakan peristiwa siklus hidup ( componentDidMount ) atau hooks ( useEffect ).

Kode tersebut dapat terlihat seperti ini:

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

Akan menutup ini sebagai jawaban - terima kasih atas pertanyaannya!

DSchau pada 18 Jun 2019

👍3 ❤1

>Semua komentar

@ j-651 Anda ingin melakukan pemeriksaan ini "di browser." Sebagai proxy untuk ini, Anda dapat menggunakan peristiwa siklus hidup ( componentDidMount ) atau hooks ( useEffect ).

Kode tersebut dapat terlihat seperti ini:

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

Akan menutup ini sebagai jawaban - terima kasih atas pertanyaannya!

DSchau pada 18 Jun 2019

👍3 ❤1

Apakah halaman ini membantu?

0 / 5 - 0 peringkat