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

Question

我正在使用 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.

Answer 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" }}
      />
    )}

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

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

typescript

gatsby