Debugging HTML Builds | Gatsby

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

有胆有识的泡面 · 「react进阶」一文吃透react-hoo ...· 2 天前 ·

刚毅的金鱼 · setState - React ...· 2 天前 ·

热心的鼠标垫 · React 知识回顾 (使用篇) | ...· 2 天前 ·

爱看球的哑铃 · react setState 机制 | 阿畅的博客· 2 天前 ·

奔跑的鸭蛋 · 在onChange事件中获取按钮值 - · 2 天前 ·

重情义的单杠 · 在 JavaScript 中获取 ...· 2 天前 ·

深沉的筷子 · 江苏省国资委法律法规 ...· 1 周前 ·

酒量小的柳树 · 【Access联合查询示例】三张表合一的示例 ...· 2 月前 ·

闷骚的咖啡 · 如何确定用react-konva绘制的立方体 ...· 4 月前 ·

刚毅的企鹅 · 搭機健康須知 | 中華航空公司· 7 月前 ·

</noscript><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><style data-emotion-css="1ics1oj">@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/static/inter-v8-latin-variable-fa91dd85e27e102dcab0b26d1c17b466.woff2) format("woff2-variations"),url(/static/inter-v8-latin-regular-c96fe5ff771f9e7b53abe32b27238136.woff2) format("woff2"),url(/static/inter-v8-latin-regular-513f22e166bab984fa607bad4cdf1899.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url(/static/inter-v8-latin-variable-fa91dd85e27e102dcab0b26d1c17b466.woff2) format("woff2-variations"),url(/static/inter-v8-latin-700-65a568f2a9065247687ab85c6a88de9a.woff2) format("woff2"),url(/static/inter-v8-latin-700-90e1ac1b0ff515438bda3332686bcc44.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}html{-webkit-scroll-padding-top:5rem;-moz-scroll-padding-top:5rem;-ms-scroll-padding-top:5rem;scroll-padding-top:5rem;-webkit-font-smoothing:antialiased;}</style><div class="_1nrsguc _1hqpeon3m _1nrsgu0"><div class="_1nrsgu0 _1nrsgu1"><div class="e861rl0 _1nrsgu0"><div class="e861rl1">Migrate to Netlify Today</div><div class="e861rl2"><p>Netlify announces the next evolution of Gatsby Cloud. <a href="https://www.netlify.com/blog/gatsby-cloud-evolution/"><strong>Learn more</strong></a></p></div></div><div class="_1nrsguf _1nrsgu3"><a class="_1nrsgug" href="/support">Support</a><a class="_1nrsgug" href="/dashboard/login">Log In</a></div></div></div><header class="_1nrsguh _1hqpeon3m"><div class="_1nrsguk _1nrsgu0 _1nrsgu1"><a aria-label="Link to home" class="_1nrsgul" href="/"><svg class="_1nrsgum" width="91" height="24" fill="#663399" viewbox="0 0 106 28"><g><path d="M14,0C6.3,0,0,6.3,0,14s6.3,14,14,14s14-6.3,14-14S21.7,0,14,0z M6.2,21.8c-2.1-2.1-3.2-4.9-3.2-7.6L13.9,25 C11.1,24.9,8.3,23.9,6.2,21.8z M16.4,24.7L3.3,11.6C4.4,6.7,8.8,3,14,3c3.7,0,6.9,1.8,8.9,4.5l-1.5,1.3C19.7,6.5,17,5,14,5 c-3.9,0-7.2,2.5-8.5,6L17,22.5c2.9-1,5.1-3.5,5.8-6.5H18v-2h7C25,19.2,21.3,23.6,16.4,24.7z"/></g><g fill="#000"><path d="M62.9,12h2.8v10h-2.8v-1.3c-1,1.5-2.3,1.6-3.1,1.6c-3.1,0-5.1-2.4-5.1-5.3c0-3,2-5.3,4.9-5.3c0.8,0,2.3,0.1,3.2,1.6V12z M57.7,17c0,1.6,1.1,2.8,2.8,2.8c1.6,0,2.8-1.2,2.8-2.8c0-1.6-1.1-2.8-2.8-2.8C58.9,14.2,57.7,15.4,57.7,17z"/><path d="M71.2,14.4V22h-2.8v-7.6h-1.1V12h1.1V8.6h2.8V12h1.9v2.4H71.2z"/><path d="M79.7,14.4c-0.7-0.6-1.3-0.7-1.6-0.7c-0.7,0-1.1,0.3-1.1,0.8c0,0.3,0.1,0.6,0.9,0.9l0.7,0.2c0.8,0.3,2,0.6,2.5,1.4 c0.3,0.4,0.5,1,0.5,1.7c0,0.9-0.3,1.8-1.1,2.5c-0.8,0.7-1.8,1.1-3,1.1c-2.1,0-3.2-1-3.9-1.7l1.5-1.7c0.6,0.6,1.4,1.2,2.2,1.2 c0.8,0,1.4-0.4,1.4-1.1c0-0.6-0.5-0.9-0.9-1l-0.6-0.2c-0.7-0.3-1.5-0.6-2.1-1.2c-0.5-0.5-0.8-1.1-0.8-1.9c0-1,0.5-1.8,1-2.3 c0.8-0.6,1.8-0.7,2.6-0.7c0.7,0,1.9,0.1,3.2,1.1L79.7,14.4z"/><path d="M85.8,13.3c1-1.4,2.4-1.6,3.2-1.6c2.9,0,4.9,2.3,4.9,5.3c0,3-2,5.3-5,5.3c-0.6,0-2.1-0.1-3.2-1.6V22H83V5.2h2.8V13.3z M85.5,17c0,1.6,1.1,2.8,2.8,2.8c1.6,0,2.8-1.2,2.8-2.8c0-1.6-1.1-2.8-2.8-2.8C86.6,14.2,85.5,15.4,85.5,17z"/><path d="M98.5,20.5L93.7,12H97l3.1,5.7l2.8-5.7h3.2l-8,15.3h-3.2L98.5,20.5z"/><path d="M54,13.7h-2.8c0,0-4.2,0-4.2,0v2.8h3.7c-0.6,1.9-2,3.2-4.6,3.2c-2.9,0-5-2.4-5-5.3S43.1,9,46,9c1.6,0,3.2,0.8,4.2,2.1 l2.3-1.5C51,7.5,48.6,6.3,46,6.3c-4.4,0-8,3.6-8,8.1s3.4,8.1,8,8.1s8-3.6,8-8.1C54.1,14.1,54,13.9,54,13.7z"/></g></svg></a><nav class="_1nrsgun _1nrsgu0 _1nrsgu3"><div class="_1sqad3p0"><button class="_1nrsgu6 _1nrsgu5 _1nrsgu4">Open Source<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewbox="0 0 24 24" class="_1sqad3p1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></button></div><div class="_1sqad3p0"><button class="_1nrsgu6 _1nrsgu5 _1nrsgu4">Learn<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewbox="0 0 24 24" class="_1sqad3p1" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></button></div></nav><button class="_1nrsguo _1nrsgu2 _1nrsgu5 _1nrsgu4 _1nrsgu0 _1nrsgup"><svg stroke="currentColor" fill="none" stroke-width="2" viewbox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg><span class="_1nrsgu9">Menu</span></button></div></header><style data-emotion-css="bxzolu">.css-bxzolu{background-color:var(--theme-ui-colors-white,#ffffff);}</style><div class=" css-bxzolu"><style data-emotion-css="b4ngfh">.token{display:inline;}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:var(--theme-ui-colors-code-comment,#527713);}.token.property,.token.tag,.token.boolean,.token.number,.token.function-name,.token.constant,.token.symbol{color:var(--theme-ui-colors-code-tag,#137886);}.token.punctuation{color:var(--theme-ui-colors-code-punctuation,#53450e);}.token.selector,.token.attr-name,.token.string,.token.char,.token.function,.token.builtin{color:var(--theme-ui-colors-code-selector,#b94185);}.token.atrule,.token.attr-value,.token.keyword,.token.class-name{color:var(--theme-ui-colors-code-keyword,#096fb3);}.token.inserted{color:var(--theme-ui-colors-code-add,#088413);}.token.deleted{color:var(--theme-ui-colors-code-remove,#da0013);}.token.regex,.token.important{color:var(--theme-ui-colors-code-regex,#dc0437);}.language-css .token.string,.style .token.string{color:var(--theme-ui-colors-code-cssString,#a2466c);}.token.important{font-weight:400;}.token.bold{font-weight:700;}.token.italic{font-style:italic;}.token.entity{cursor:help;}.token-line &gt; span.token:empty::after{min-height:1em;display:inline-block;content:"";}.namespace{opacity:0.7;}.token.tab:not(:empty):before,.token.cr:before,.token.lf:before{color:var(--theme-ui-colors-code-invisibles,#e0d7d1);}.gatsby-highlight{background:var(--theme-ui-colors-code-bg,#fdfaf6);color:var(--theme-ui-colors-text-primary,#36313d);position:relative;-webkit-overflow-scrolling:touch;}.gatsby-highlight pre code{display:block;font-size:100%;line-height:1.5;float:left;min-width:100%;padding:0 1.5rem;}.gatsby-highlight-code-line{background:var(--theme-ui-colors-code-lineHighlightBackground,#fbf0ea);margin-left:-1.5rem;margin-right:-1.5rem;padding-left:1.25rem;padding-right:1.5rem;border-left:0.25rem solid var(--theme-ui-colors-code-lineHighlightBorder,#f1beb6);display:block;}.gatsby-highlight pre::-webkit-scrollbar{width:0.5rem;height:0.5rem;}.gatsby-highlight pre::-webkit-scrollbar-thumb{background:var(--theme-ui-colors-code-scrollbarThumb,#f4d1c6);}.gatsby-highlight pre::-webkit-scrollbar-track{background:var(--theme-ui-colors-code-scrollbarTrack,#faede5);}.gatsby-highlight pre[class*='language-']{background-color:transparent;border:0;padding:1.5rem 0;-webkit-overflow-scrolling:touch;margin-bottom:1.5rem;}.gatsby-highlight pre[class*='language-']::before{background:var(--theme-ui-colors-code-bgInline,#fbf2e9);border-radius:0 0 4px 4px;color:var(--theme-ui-colors-blackFade-70,rgba(35,33,41,0.7));font-size:0.75rem;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:400;-webkit-letter-spacing:0.075em;-moz-letter-spacing:0.075em;-ms-letter-spacing:0.075em;letter-spacing:0.075em;line-height:1;padding:0.25rem 0.5rem;left:1.5rem;text-align:right;text-transform:uppercase;top:0;}.gatsby-highlight pre[class='language-javascript']::before{content:'js';background:#f7df1e;}.gatsby-highlight pre[class='language-js']::before{content:'js';background:#f7df1e;}.gatsby-highlight pre[class='language-jsx']::before{content:'jsx';background:#61dafb;}.gatsby-highlight pre[class='language-typescript']::before{content:'ts';background:#294e80;color:var(--theme-ui-colors-white,#ffffff);}.gatsby-highlight pre[class='language-ts']::before{content:'ts';background:#294e80;color:var(--theme-ui-colors-white,#ffffff);}.gatsby-highlight pre[class='language-tsx']::before{content:'tsx';background:#294e80;color:var(--theme-ui-colors-white,#ffffff);}.gatsby-highlight pre[class='language-graphql']::before{content:'GraphQL';background:#E10098;color:var(--theme-ui-colors-white,#ffffff);}.gatsby-highlight pre[class='language-html']::before{content:'html';background:#005A9C;color:var(--theme-ui-colors-white,#ffffff);}.gatsby-highlight pre[class='language-css']::before{content:'css';background:#ff9800;color:var(--theme-ui-colors-white,#ffffff);}.gatsby-highlight pre[class='language-mdx']::before{content:'mdx';background:#f9ac00;color:var(--theme-ui-colors-white,#ffffff);}.gatsby-highlight pre[class='language-shell']::before{content:'shell';}.gatsby-highlight pre[class='language-sh']::before{content:'sh';}.gatsby-highlight pre[class='language-bash']::before{content:'bash';}.gatsby-highlight pre[class='language-yaml']::before{content:'yaml';background:#ffa8df;}.gatsby-highlight pre[class='language-markdown']::before{content:'md';}.gatsby-highlight pre[class='language-json']::before,.gatsby-highlight pre[class='language-json5']::before{content:'json';background:linen;}.gatsby-highlight pre[class='language-diff']::before{content:'diff';background:#e6ffed;}.gatsby-highlight pre[class='language-text']::before{content:'text';background:var(--theme-ui-colors-white,#ffffff);}.gatsby-highlight pre[class='language-flow']::before{content:'flow';background:#E8BD36;}html,body{color:var(--theme-ui-colors-text-primary,#36313d);-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;}a{-webkit-text-decoration:none;text-decoration:none;}a &gt; code{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;border-bottom:1px solid var(--theme-ui-colors-link-border,#d9bae8);}a:hover &gt; code{border-bottom-color:var(--theme-ui-colors-link-hoverBorder,#8a4baf);}h1{font-weight:700;}h1,h2,h3,h4,h5,h6{color:var(--theme-ui-colors-text-header,#000000);-webkit-letter-spacing:-0.015em;-moz-letter-spacing:-0.015em;-ms-letter-spacing:-0.015em;letter-spacing:-0.015em;}h2{margin-top:3rem;}h3{margin-top:3rem;}h4,h5,h6{font-size:1.125rem;}h5,h6{font-weight:600;}h6{font-size:1rem;}blockquote{padding-left:1.5rem;margin-left:0;border-left:0.25rem solid var(--theme-ui-colors-standardLine,#f0f0f2);}hr{background-color:var(--theme-ui-colors-standardLine,#f0f0f2);}iframe{border:0;}th,td{border-color:var(--theme-ui-colors-standardLine,#f0f0f2);}tt,code,kbd,samp{line-height:inherit;}code::before,code::after,tt::before,tt::after{word-break:normal;}h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{font-weight:400;font-size:82.5%;}tt,code,kbd{background:var(--theme-ui-colors-code-bgInline,#fbf2e9);padding-top:0.2em;padding-bottom:0.2em;}tt,code,kbd,.gatsby-code-title{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:90%;font-variant:none;-webkit-font-feature-settings:"clig" 0,"calt" 0;font-feature-settings:"clig" 0,"calt" 0;}.gatsby-resp-image-link + em,.gatsby-resp-image-wrapper + em{font-size:0.875rem;line-height:1.25;padding-top:0.5rem;margin-bottom:3rem;display:block;font-style:normal;color:var(--theme-ui-colors-text-secondary,#78757a);position:relative;}.gatsby-resp-image-link + em a,.gatsby-resp-image-wrapper + em a{font-weight:400;color:var(--theme-ui-colors-lilac,#8a4baf);}.main-body a{color:var(--theme-ui-colors-link-color,#8a4baf);-webkit-text-decoration:none;text-decoration:none;-webkit-transition:all 100ms cubic-bezier(0.4,0,0.2,1);transition:all 100ms cubic-bezier(0.4,0,0.2,1);border-bottom:1px solid var(--theme-ui-colors-link-border,#d9bae8);}.main-body a:hover{border-bottom-color:var(--theme-ui-colors-link-hoverBorder,#8a4baf);}.post-body h1{font-weight:700;}.post-body figure img{margin-bottom:0;}.post-body figcaption{color:var(--theme-ui-colors-text-secondary,#78757a);font-size:87.5%;margin-top:0.25rem;margin-bottom:0.75rem;}.main-body a.anchor{color:inherit;fill:var(--theme-ui-colors-link-color,#8a4baf);-webkit-text-decoration:none;text-decoration:none;border-bottom:none;}.main-body a.anchor:hover{background:none;}.main-body a.gatsby-resp-image-link{border-bottom:transparent;margin-top:3rem;margin-bottom:3rem;}.main-body figure a.gatsby-resp-image-link{border-bottom:transparent;margin-top:3rem;margin-bottom:0;}.gatsby-highlight,.gatsby-code-title,.post-body .gatsby-resp-image-link{margin-left:-1.5rem;margin-right:-1.5rem;}.gatsby-resp-image-link{border-radius:2px;overflow:hidden;}.gatsby-code-title{background:var(--theme-ui-colors-code-bg,#fdfaf6);border-bottom:1px solid var(--theme-ui-colors-code-border,#faede5);color:var(--theme-ui-colors-code-text,#866c5b);padding:1.25rem 1.5rem 1rem;font-size:0.75rem;margin-top:0.5rem;}video{width:100%;margin-bottom:1.5rem;}.twitter-tweet-rendered{margin:3rem auto !important;}.egghead-video{border:none;max-width:100%;}.gatsby-resp-image-link + em a[href*='//']:after{content:" " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23744C9E'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E");}@media (min-width:750px){.gatsby-highlight,.gatsby-resp-image-link,.gatsby-code-title{margin-left:0;margin-right:0;border-radius:8px;}.gatsby-code-title{border-radius:8px 8px 0 0;}.gatsby-code-title + .gatsby-highlight{border-radius:0 0 8px 8px;}}</style><style data-emotion-css="qkl76z">.css-qkl76z{padding-left:0;padding-right:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}</style><style data-emotion-css="cz7hua">.css-cz7hua{padding-left:1.5rem;padding-right:1.5rem;margin-left:auto;margin-right:auto;width:100%;max-width:90rem;padding-left:0;padding-right:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}@media (min-width:550px){.css-cz7hua{width:100%;}}</style><div class="css-cz7hua"><style data-emotion-css="31l7gp">.css-31l7gp{min-width:0;}</style><div class="css-31l7gp"><main class="docSearch-content"><div id="gatsby-skip-here" style="contain:none"/><style data-emotion-css="w6bndu">.css-w6bndu{padding-left:1.5rem;padding-right:1.5rem;padding-top:3rem;}</style><div class="css-w6bndu"><style data-emotion-css="4zq9p7">.css-4zq9p7{color:var(--theme-ui-colors-text-secondary,#78757a);;font-size:0.875rem;margin-bottom:1.5rem;}@media screen and (min-width:550px){.css-4zq9p7{display:inherit;margin-bottom:2.5rem;}}</style><nav aria-label="breadcrumb" class="css-4zq9p7"><span><style data-emotion-css="2i7f2t">.css-2i7f2t{color:var(--theme-ui-colors-grey-60,#635e69);-webkit-text-decoration:none;text-decoration:none;}.css-2i7f2t:hover{color:var(--theme-ui-colors-purple-50,#8a4baf);border-bottom-width:1px;border-bottom-color:var(--theme-ui-colors-purple-50,#8a4baf);border-bottom-style:solid;}</style><a class="css-2i7f2t" href="/docs/">Documentation</a></span><style data-emotion-css="1r9k75x">.css-1r9k75x{margin-top:0rem;margin-bottom:0rem;margin-left:0.25rem;margin-right:0.25rem;vertical-align:middle;color:var(--theme-ui-colors-grey-40,#b7b5bd);}</style><span role="presentation" class="css-1r9k75x"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewbox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></span><span><a class="css-2i7f2t" href="/docs/how-to/">How-to Guides</a></span><span role="presentation" class="css-1r9k75x"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewbox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></span><span><a class="css-2i7f2t" href="/docs/how-to/local-development/">Local Development</a></span><span role="presentation" class="css-1r9k75x"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewbox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></span><span><a class="css-2i7f2t" href="/docs/how-to/local-development#additional">Additional Guides</a></span><span role="presentation" class="css-1r9k75x"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewbox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></span></nav><style data-emotion-css="1hd94xd">.css-1hd94xd{color:var(--theme-ui-colors-text-secondary,#78757a);display:inherit;font-size:0.875rem;margin-bottom:1.5rem;}@media screen and (min-width:550px){.css-1hd94xd{;margin-bottom:2.5rem;}}</style><nav aria-label="breadcrumb" class="css-1hd94xd"><span role="presentation" class="css-1r9k75x"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewbox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></span><a class="css-2i7f2t" href="/docs/">Docs</a></nav><style data-emotion-css="8kn4zf">.css-8kn4zf{margin-top:0;}</style><h1 class="css-8kn4zf">Debugging HTML Builds</h1></div><style data-emotion-css="jm88mp">@media (min-width:1300px){.css-jm88mp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}}</style><div class="css-jm88mp"><style data-emotion-css="1y0dukd">.css-1y0dukd{min-width:0;padding-left:1.5rem;padding-right:1.5rem;-webkit-order:2;-ms-flex-order:2;order:2;}@media (min-width:1000px){.css-1y0dukd{padding-left:2rem;padding-right:2rem;}}@media (min-width:1300px){.css-1y0dukd{width:18rem;position:-webkit-sticky;position:sticky;top:calc(7rem + 3rem);max-height:calc(100vh - 7rem - 3rem - 3rem);overflow:auto;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}}</style><div class="css-1y0dukd"><style data-emotion-css="1h992as">.css-1h992as{margin-bottom:2rem;padding-bottom:1.25rem;border-bottom:1px solid [object Object];}@media screen and (min-width:1300px){.css-1h992as{margin-bottom:0rem;padding-bottom:0rem;border-bottom:0;}}</style><nav class="css-1h992as"><style data-emotion-css="nx7ts9">.css-nx7ts9{color:var(--theme-ui-colors-text-secondary,#78757a);font-size:0.875rem;-webkit-letter-spacing:0.075em;-moz-letter-spacing:0.075em;-ms-letter-spacing:0.075em;letter-spacing:0.075em;margin-top:0rem;text-transform:uppercase;}</style><h2 class="css-nx7ts9">Table of Contents</h2><style data-emotion-css="1ig99e7">.css-1ig99e7{list-style:none;margin:0rem;}</style><ul class="css-1ig99e7"><style data-emotion-css="147dsqm">@media (min-width:1300px){.css-147dsqm{font-size:0.875rem;}}</style><li data-testid="#how-to-check-if-window-is-defined" class="css-147dsqm"><style data-emotion-css="1kvbwpa">.css-1kvbwpa{-webkit-text-decoration:none;text-decoration:none;}.css-1kvbwpa.css-1kvbwpa{color:var(--theme-ui-colors-text-secondary,#78757a);border:0;border-bottom:none;-webkit-transition:all 100ms cubic-bezier(0.4,0,0.2,1);transition:all 100ms cubic-bezier(0.4,0,0.2,1);}.css-1kvbwpa.css-1kvbwpa:hover{color:var(--theme-ui-colors-link-color,#8a4baf);border-bottom:1px solid var(--theme-ui-colors-link-hoverBorder,#8a4baf);}</style><a href="#how-to-check-if-window-is-defined" class="css-1kvbwpa">How to check if window is defined</a></li><li data-testid="#fixing-third-party-modules" class="css-147dsqm"><a href="#fixing-third-party-modules" class="css-1kvbwpa">Fixing third-party modules</a></li><li data-testid="#ssr-during-gatsby-develop" class="css-147dsqm"><a href="#ssr-during-gatsby-develop" class="css-1kvbwpa">SSR during gatsby develop</a></li></ul></nav></div><style data-emotion-css="11kqk2a">.css-11kqk2a{padding-left:1.5rem;padding-right:1.5rem;}.css-11kqk2a a{word-break:break-word;}@media (min-width:1000px){.css-11kqk2a{padding-bottom:1rem;padding-left:2rem;padding-right:2rem;}}@media (min-width:1300px){.css-11kqk2a{max-width:52rem;min-width:0;}}</style><div class="main-body css-11kqk2a"><p class="css-0">Errors while building static HTML files (the build-time React SSR process) or while using <code class="css-0">getServerData</code> (the <a href="/docs/reference/rendering-options/server-side-rendering/" class="css-0">runtime SSR</a> process) generally happen for one of the following reasons:</p><ol class="css-0"><li class="css-0"><p class="css-0">Some of your code references “browser globals” like <code class="css-0">window</code> or <code class="css-0">document</code> that aren’t available in Node.js. If this is your problem you should see an error above like “window is not defined”. To fix this, find the offending code and either a) check before calling the code if window is defined so the code doesn’t run while Gatsby is building (see code sample below) or b) if the code is in the render function of a React.js component, move that code into a <a href="https://reactjs.org/docs/react-component.html#componentdidmount" class="css-0"><code class="css-0">componentDidMount</code> lifecycle</a> or into a <a href="https://reactjs.org/docs/hooks-reference.html#useeffect" class="css-0"><code class="css-0">useEffect</code> hook</a>, which ensures the code doesn’t run unless it’s in the browser.</p></li><li class="css-0"><p class="css-0">Check that each of your JS files listed in your <code class="css-0">pages</code> directory (and any sub-directories) are exporting either a React component or string. Gatsby treats any JS file listed under the <code class="css-0">pages</code> dir as a page component, so it must have a default export that’s a component or string.</p></li><li class="css-0"><p class="css-0">You mix up <code class="css-0">import</code> and <code class="css-0">require</code> calls in the same file. This might lead to “WebpackError: Invariant Violation: Minified React error #130” <a href="/docs/reference/release-notes/migrating-from-v1-to-v2/#convert-to-either-pure-commonjs-or-pure-es6" class="css-0">since webpack 4 is stricter than v3</a>. The solution is to only use <code class="css-0">import</code> and this also extends to <code class="css-0">gatsby-ssr</code> and <code class="css-0">gatsby-browser</code> files.</p></li><li class="css-0"><p class="css-0">Your app doesn’t correctly <a href="https://reactjs.org/docs/react-dom.html" class="css-0">hydrate</a> in the client, which results in gatsby develop and gatsby build being inconsistent. It’s possible that a change in a file like <code class="css-0">gatsby-ssr</code> or <code class="css-0">gatsby-browser</code> has a structure that is not reflected in the other file, meaning that there is a mismatch between client and server output.</p></li><li class="css-0"><p class="css-0">Some other reason :-) #1 is the most common reason building static files