最近、ユーザーがInternet Explorerを使用しているかどうかを確認するためのチェックとして、 const isIE = /*@cc_on!@*/ false || !!document.documentMode
を追加し、最新のブラウザー(Chrome / Firefox)を使用するように求めるメッセージを条件付きで追加しました。 これはgatsby develop
を使用すると期待どおりに機能しますが、 gatsby build
を使用すると失敗します。
error Building static HTML failed
WebpackError: ReferenceError: document is not defined
const isIE = /*@cc_on!@*/ false || !!document.documentMode
を宣言した後、プロジェクトフォルダー内でgatsby build
を実行し、jsファイルの1つでconst {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
@ 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
答えられたとおりにこれを閉じるつもりです-質問に感謝します!
最も参考になるコメント
@ j-651このチェックは「ブラウザで」実行する必要があります。 このプロキシとして、ライフサイクルイベント(
componentDidMount
)またはフック(useEffect
)を使用できます。コードは次のようになります。
答えられたとおりにこれを閉じるつもりです-質問に感謝します!