javascript - 失败页面 "/404/"的 page-data.json 中的错误语句页面数据

Question

当我执行 gatsby build 时出现以下错误

➤ gatsby build
success compile gatsby files - 0.861s
success load gatsby config - 0.019s
success load plugins - 0.380s
warn gatsby-plugin-react-helmet: Gatsby now has built-in support for modifying the document head. Learn more at https://gatsby.dev/gatsby-head
success onPreInit - 0.007s
success delete worker cache from previous builds - 0.001s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.071s
success copy gatsby files - 0.077s
success Compiling Gatsby Functions - 0.181s
success onPreBootstrap - 0.191s
success createSchemaCustomization - 0.088s
success Contentful: Sync all items - 0.145s - 5/5 34.43/s
success Contentful: Fetch data - 0.450s
info Contentful: 0 new entries
info Contentful: 3 updated entries
info Contentful: 0 deleted entries
info Contentful: 0 cached entries
info Contentful: 1 new assets
info Contentful: 1 updated assets
info Contentful: 0 cached assets
info Contentful: 0 deleted assets
info Creating 3 Contentful CompanyIndex nodes
info Creating 2 Contentful asset nodes
success Contentful: Create nodes - 0.023s
success Contentful: Process data - 0.043s
success Checking for changed pages - 0.000s
success source and transform nodes - 0.577s
info Writing GraphQL type definitions to /Users/koutarou/dev/Aries-front-gatsby/.cache/schema.gql
success building schema - 0.293s
success createPages - 0.010s
success createPagesStatefully - 0.058s
info Total nodes: 50, SitePage nodes: 7 (use --verbose for breakdown)
success Checking for changed pages - 0.000s
success Cleaning up stale page-data - 0.001s
success onPreExtractQueries - 0.000s
success extract queries from components - 1.302s
success write out redirect data - 0.002s
success onPostBootstrap - 0.001s
info bootstrap finished - 6.367s
success write out requires - 0.002s
success Building production JavaScript and CSS bundles - 16.210s
success Building HTML renderer - 18.689s
success Execute page configs - 0.244s
success Caching Webpack compilations - 0.001s
success run queries in workers - 0.148s - 11/11 74.15/s
success Merge worker state - 0.006s
success Rewriting compilation hashes - 0.053s
success Writing page-data.json files to public directory - 0.110s - 7/7 63.67/s
 ERROR

Page data from page-data.json for the failed page "/404/": {
  "componentChunkName": "component---src-pages-404-js",
  "path": "/404/",
  "result": {
    "pageContext": {}
  },
  "staticQueryHashes": [
    "744553348"
  ]
}

failed Building static HTML for pages - 2.654s

 ERROR #95313

Building static HTML failed for path "/404/"

See our docs page for more info on this error: https://gatsby.dev/debug-html

package.json 在这里。

{
  "name": "",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "author": "testUser",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@mui/icons-material": "^5.10.6",
    "@mui/material": "^5.10.8",
    "@mui/styles": "^5.10.8",
    "babel-plugin-styled-components": "^2.0.7",
    "dotenv": "^16.0.3",
    "gatsby": "^4.24.1",
    "gatsby-plugin-google-gtag": "^4.24.0",
    "gatsby-plugin-image": "^2.24.0",
    "gatsby-plugin-react-helmet": "^5.24.0",
    "gatsby-plugin-sharp": "^4.24.0",
    "gatsby-plugin-sitemap": "^5.24.0",
    "gatsby-plugin-styled-components": "^5.24.0",
    "gatsby-source-contentful": "^7.22.0",
    "gatsby-transformer-sharp": "^4.24.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-helmet": "^6.1.0",
    "react-tabs": "^5.1.0",
    "styled-components": "^5.3.6"
  }
}

gatsby-config.js 在这里。

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
});

module.exports = {
  siteMetadata: {
    defaultTitle: "test page",
    siteUrl: `https://www.example.com`,
    author: `Lagopus`,
    defaultDescription: "testtesttest",
    defaultImage: "",
    twitterUsername: "",
  },
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: "gatsby-source-contentful",
      options: {
        accessToken: process.env.GATSBY_ACCESS_TOKEN,
        spaceId: process.env.GATSBY_SPACE_ID,
      },
    },
    {
      resolve: "gatsby-plugin-google-gtag",
      options: {
        trackingId: [process.env.GATSBY_GA_MEASUREMENT_ID],
        gtagConfig: {
          optimize_id: [process.env.GATSBY_GTM_ID],
          anonymize_ip: true,
          cookie_expires: 0,
        },
        pluginConfig: {
          head: true,
        },
      },
    },
  ],
};

404.js 就在这里。

import { Link } from "gatsby";
import * as React from "react";
import Layout from "../layouts";
import { default as Seo } from "../layouts/head";

const NotFoundPage = () => {
  return (
    <Layout>
      <Link to="/">Go home</Link>.
    </Layout>
  );
};

export default NotFoundPage;

export const Head = () => <Seo title="home page" />;

这里是构建后会生成的404页面的信息。

// /public/component---src-pages-404-js-060c466843a77c0728e6.js
"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[883],{429:function(e,t,n){n.r(t),n.d(t,{Head:function(){return l}});var r=n(1082),u=n(7294),c=n(1823),a=n(9152);t.default=function(){return u.createElement(c.Z,null,u.createElement(r.rU,{to:"/"},"Go home"),".")};var l=function(){return u.createElement(a.Z,{title:"Home page"})}}}]);
//# sourceMappingURL=component---src-pages-404-js-060c466843a77c0728e6.js.map

// /public/component---src-pages-404-js-060c466843a77c0728e6.js.map
{"version":3,"file":"component---src-pages-404-js-060c466843a77c0728e6.js","mappings":"8KAaA,UARqB,WACnB,OACE,gBAAC,IAAD,KACE,gBAAC,KAAD,CAAMA,GAAG,KAAT,WADF,IAIH,EAIM,IAAMC,EAAO,kBAAM,gBAAC,IAAD,CAAKC,MAAM,QAAjB,C","sources":["webpack:///./src/pages/404.js"],"sourcesContent":["import { Link } from \"gatsby\";\nimport * as React from \"react\";\nimport Layout from \"../layouts\";\nimport { default as Seo } from \"../layouts/head\";\n\nconst NotFoundPage = () => {\n  return (\n    <Layout>\n      <Link to=\"/\">Go home</Link>.\n    </Layout>\n  );\n};\n\nexport default NotFoundPage;\n\nexport const Head = () => <Seo title=\"home page\" />;\n"],"names":["to","Head","title"],"sourceRoot":""}

当我在 gatsby-config.js 中注释掉 gatsby-plugin-google-gtag 然后构建时，它没有问题地通过了，所以我认为问题出在gatsby-plugin-google-gtag，但我无法找出原因。

如果您需要任何其他信息，请告诉我。

Answer 1

您的 gatsby-plugin-google-gtag 插件配置中有错别字:trackingId 应该是 trackingIds(注意尾随S)

{
  resolve: "gatsby-plugin-google-gtag",
  options: {
    trackingIds: [process.env.GATSBY_GA_MEASUREMENT_ID],
    gtagConfig: {
      optimize_id: [process.env.GATSBY_GTM_ID],
      anonymize_ip: true,
      cookie_expires: 0,
    },
    pluginConfig: {
      head: true,
    },
  },
},