Gatsby: WebpackError: ReferenceError: документ не определен - проверка IE

Созданный на 18 июн. 2019 · 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 18 июн. 2019

👍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 18 июн. 2019

👍3 ❤1

Была ли эта страница полезной?

0 / 5 - 0 рейтинги