gatsby build → WebpackError: TypeError: Cannot read property 'pathname' of undefined答案

【问题标题】：gatsby build → WebpackError: TypeError: Cannot read property 'pathname' of undefinedgatsby build → WebpackError: TypeError: Cannot read property 'pathname' of undefined
【发布时间】：2021-04-18 09:59:26
【问题描述】：

我正在使用gatsby-plugin-breadcrumb 创建一个面包屑列表。
由于我想在不是根页面的页面上显示面包屑列表，所以我们将Breadcrumb component 放在layout.tsx 中，如下所示。

const Layout = ({ location, crumbLabel, children }) => {
  return (
    <>
      <Header />
      <main>
        {location.pathname !== "/" && (
          <Breadcrumb
            location={location}
            crumbLabel={crumbLabel}
            crumbSeparator=""
            crumbstyle={{ color: "#666" }}
            crumbactionstyle={{ color: "#333" }}
          />
        )}
        {children}
      </main>
      <Footer />
    </div>
  </>
)}

此代码在gatsby develop 中运行良好，但是当我运行gatsby build 时，出现以下错误。

failed Building static HTML for pages - 0.715s
 ERROR #95313 
Building static HTML failed for path "/404/"
See our docs page for more info on this error: https://gatsby.dev/debug-html
  22 |         <Header />
  23 |         <main>
> 24 |           {location.pathname !== "/" && (
     |                     ^
  25 |             <Breadcrumb
  26 |               location={location}
  27 |               crumbLabel={crumbLabel}
  WebpackError: TypeError: Cannot read property 'pathname' of undefined
  - layout.tsx:24 
    demo/src/components/layout.tsx:24:21
  - extends.js:8 
    [demo]/[@babel]/runtime/helpers/esm/extends.js:8:1
  - static-entry.js:263 
    demo/.cache/static-entry.js:263:20
error Command failed with exit code 1.

我可以将Breadcrumb component 放在layout.tsx 中并将Breadcrumb component 隐藏在根页面中吗？

我还尝试通过在 useEffect 中获取路径名来隐藏它。

const [root, setRoot] = useState(false)
useEffect(() => {
  if (location.pathname === "/") setRoot(true)
}, [])

return (
  <>
    <Header />
    <main>
      {!root && (
        <Breadcrumb
          location={location}
...

结果显示以下错误消息。

failed Building static HTML for pages - 0.510s
 ERROR #95313 
Building static HTML failed for path "/404/"
See our docs page for more info on this error: https://gatsby.dev/debug-html
  35 |   var _useBreadcrumb = (0, _useBreadcrumb2.default)({
  36 |     location: (0, _extends2.default)({}, location, {
> 37 |       pathname: usePathPrefix ? location.pathname.replace(new RegExp("^" + usePathPrefix), '') : location.pathname
     |                                                                                                           ^
  38 |     }),
  39 |     crumbLabel: crumbLabel,
  40 |     crumbSeparator: crumbSeparator
  WebpackError: TypeError: Cannot read property 'pathname' of undefined
  - click-tracking-crumb.js:37 
    [demo]/[gatsby-plugin-breadcrumb]/components/click-tracking-crumb.js:37:107
  - extends.js:8 
    [demo]/[@babel]/runtime/helpers/esm/extends.js:8:1
  - static-entry.js:263 
    demo/.cache/static-entry.js:263:20
error Command failed with exit code 1.

【问题讨论】：

标签： typescript gatsby

【解决方案1】：

location props 仅在顶级组件（页面）中可用。因此，如果由于某种原因，您在其他地方重用 Layout 组件并且您没有提供（或它不可用）location，它将破坏您的代码。

在您的情况下，您似乎没有在404 页面上提供location。您可以绕过它添加一个默认值，例如：

const Layout = ({ location="", crumbLabel, children }) => {}

或者添加类似的条件：

    {location && location.pathname !== "/" && (
      <Breadcrumb
        location={location}
        crumbLabel={crumbLabel}
        crumbSeparator=""
        crumbstyle={{ color: "#666" }}
        crumbactionstyle={{ color: "#333" }}
      />
    )}

【讨论】：