์ต๊ทผ์ ์ฌ์ฉ์๊ฐ 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
์ ์ธํ๊ณ 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
)๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.์ฝ๋๋ ๋ค์๊ณผ ๊ฐ์ ์ ์์ต๋๋ค.
๋ต๋ณ์ผ๋ก ์ข ๋ฃํ๊ฒ ์ต๋๋ค. ์ง๋ฌธ ํด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค!