我最近添加了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
在声明const isIE = /*@cc_on!@*/ false || !!document.documentMode
并在其中一个js文件中的const {isIE && ()}
上运行检查后,在项目文件夹中运行gatsby build
。 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
)。代码看起来像这样:
按照回答将其关闭-谢谢您的提问!