Dear Community,
I was deploying a Gatsby blog site and met some problems.
Here is the build log and my site name is https://nevermoreblog.netlify.app. You can see my GitHub repo here https://github.com/Kspurs/nevermoresBlog
10:42:28 AM: build-image version: 3ffff9df3d5419545acc1b673a54de348174406d (focal)
10:42:28 AM: buildbot version: 5e61a99f29958b8aa3fd441571eb23975d453146
10:42:28 AM: Fetching cached dependencies
10:42:28 AM: Starting to download cache of 276.4MB
10:42:33 AM: Finished downloading cache in 4.409s
10:42:33 AM: Starting to extract cache
10:42:35 AM: Finished extracting cache in 2.954s
10:42:36 AM: Finished fetching cache in 7.43s
10:42:36 AM: Starting to prepare the repo for build
10:42:36 AM: Preparing Git Reference refs/heads/main
10:42:37 AM: Starting to install dependencies
10:42:37 AM: Python version set to 3.8
10:42:37 AM: Attempting Ruby version 2.7.2, read from environment
10:42:38 AM: Using Ruby version 2.7.2
10:42:39 AM: Started restoring cached go cache
10:42:39 AM: Finished restoring cached go cache
10:42:39 AM: go version go1.19.13 linux/amd64
10:42:39 AM: Using PHP version 8.0
10:42:40 AM: Started restoring cached Node.js version
10:42:41 AM: Finished restoring cached Node.js version
10:42:41 AM: v18.18.2 is already installed.
10:42:42 AM: Now using node v18.18.2 (npm v9.8.1)
10:42:42 AM: Enabling Node.js Corepack
10:42:42 AM: Started restoring cached build plugins
10:42:42 AM: Finished restoring cached build plugins
10:42:42 AM: Started restoring cached corepack dependencies
10:42:42 AM: Finished restoring cached corepack dependencies
10:42:42 AM: No npm workspaces detected
10:42:42 AM: Started restoring cached node modules
10:42:42 AM: Finished restoring cached node modules
10:42:42 AM: Installing npm packages using npm version 9.8.1
10:42:44 AM: npm WARN ERESOLVE overriding peer dependency
10:42:44 AM: npm WARN While resolving: react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825
10:42:44 AM: npm WARN Found: react@18.2.0
10:42:44 AM: npm WARN node_modules/react
10:42:44 AM: npm WARN react@"^18.2.0" from the root project
10:42:44 AM: npm WARN 23 more (@contentful/rich-text-react-renderer, ...)
10:42:44 AM: npm WARN
10:42:44 AM: npm WARN Could not resolve dependency:
10:42:44 AM: npm WARN peer react@"0.0.0-experimental-c8b778b7f-20220825" from react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825
10:42:44 AM: npm WARN node_modules/react-server-dom-webpack
10:42:44 AM: npm WARN react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from gatsby@5.12.9
10:42:44 AM: npm WARN node_modules/gatsby
10:42:44 AM: npm WARN
10:42:44 AM: npm WARN Conflicting peer dependency: react@0.0.0-experimental-c8b778b7f-20220825
10:42:44 AM: npm WARN node_modules/react
10:42:44 AM: npm WARN peer react@"0.0.0-experimental-c8b778b7f-20220825" from react-server-dom-webpack@0.0.0-experimental-c8b778b7f-20220825
10:42:44 AM: npm WARN node_modules/react-server-dom-webpack
10:42:44 AM: npm WARN react-server-dom-webpack@"0.0.0-experimental-c8b778b7f-20220825" from gatsby@5.12.9
10:42:44 AM: npm WARN node_modules/gatsby
10:42:47 AM: npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
10:42:47 AM: npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
10:42:47 AM: npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
10:42:47 AM: npm WARN deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
10:42:56 AM: added 487 packages, removed 132 packages, changed 338 packages, and audited 1948 packages in 14s
10:42:56 AM: 446 packages are looking for funding
10:42:56 AM: run `npm fund` for details
10:42:57 AM: 20 moderate severity vulnerabilities
10:42:57 AM: To address issues that do not require attention, run:
10:42:57 AM: npm audit fix
10:42:57 AM: To address all issues possible (including breaking changes), run:
10:42:57 AM: npm audit fix --force
10:42:57 AM: Some issues need review, and may require choosing
10:42:57 AM: a different dependency.
10:42:57 AM: Run `npm audit` for details.
10:42:57 AM: npm packages installed
10:42:57 AM: Successfully installed dependencies
10:42:57 AM: Starting build script
10:42:58 AM: Detected 1 framework(s)
10:42:58 AM: "gatsby" at version "5.12.9"
10:42:58 AM: Section completed: initializing
10:42:59 AM:
10:42:59 AM: Netlify Build
10:42:59 AM: ────────────────────────────────────────────────────────────────
10:42:59 AM:
10:42:59 AM: ❯ Version
10:42:59 AM: @netlify/build 29.26.4
10:42:59 AM:
10:42:59 AM: ❯ Flags
10:42:59 AM: baseRelDir: true
10:42:59 AM: buildId: 655824913ae6f500085ae609
10:42:59 AM: deployId: 655824913ae6f500085ae60b
10:43:00 AM:
10:43:00 AM: ❯ Current directory
10:43:00 AM: /opt/build/repo
10:43:00 AM:
10:43:00 AM: ❯ Config file
10:43:00 AM: No config file was defined: using default values.
10:43:00 AM:
10:43:00 AM: ❯ Context
10:43:00 AM: production
10:43:00 AM:
10:43:00 AM: ❯ Loading plugins
10:43:00 AM: - @netlify/plugin-gatsby@3.7.2 from Netlify app
10:43:01 AM:
10:43:01 AM: @netlify/plugin-gatsby (onPreBuild event)
10:43:01 AM: ────────────────────────────────────────────────────────────────
10:43:01 AM:
10:43:01 AM: Skipping @netlify/plugin-gatsby work, because used Gatsby version supports adapters.
10:43:01 AM:
10:43:01 AM: (@netlify/plugin-gatsby onPreBuild completed in 52ms)
10:43:01 AM:
10:43:01 AM: Build command from Netlify app
10:43:01 AM: ────────────────────────────────────────────────────────────────
10:43:01 AM:
10:43:01 AM: $ npm run build
10:43:01 AM: > nevermoresblog@1.0.0 build
10:43:01 AM: > gatsby build
10:43:04 AM: success compile gatsby files - 1.509s
10:43:04 AM: success load gatsby config - 0.027s
10:43:07 AM: success Installing Netlify adapter (gatsby-adapter-netlify@^1.0.0-alpha) - 2.811s
10:43:07 AM: info If you plan on staying on this deployment platform, consider installing gatsby-adapter-netlify as a dependency in your project. This will give you faster and more robust installs.
10:43:07 AM: info Using gatsby-adapter-netlify adapter
10:43:08 AM: info [gatsby-adapter-netlify] Found a Gatsby cache. We"re about to go FAST. ⚡
success load plugins - 0.428s
10:43:08 AM: success onPreInit - 0.003s
10:43:08 AM: success delete worker cache from previous builds - 0.002s
10:43:08 AM: info One or more of your plugins have changed since the last time you ran Gatsby. As
10:43:08 AM: a precaution, we"re deleting your site"s cache to ensure there"s no stale data.
success initialize cache - 0.119s
10:43:08 AM: success copy gatsby files - 0.084s
10:43:08 AM: success Compiling Gatsby Functions - 0.159s
10:43:08 AM: success onPreBootstrap - 0.284s
10:43:09 AM: success createSchemaCustomization - 0.005s
10:43:09 AM: success Clean up stale nodes - 0.072s - 0/0 0.00/s
10:43:09 AM: success Checking for changed pages - 0.000s
10:43:09 AM: success source and transform nodes - 0.486s
10:43:10 AM: info Writing GraphQL type definitions to /opt/build/repo/.cache/schema.gql
10:43:11 AM: success building schema - 1.098s
10:43:11 AM: success createPages - 0.058s
10:43:11 AM: success createPagesStatefully - 0.305s
10:43:11 AM: info Total nodes: 52, SitePage nodes: 11 (use --verbose for breakdown)
10:43:11 AM: success Checking for changed pages - 0.000s
10:43:11 AM: success Cleaning up stale page-data - 0.001s
10:43:11 AM: success onPreExtractQueries - 0.000s
10:43:19 AM: success extract queries from components - 8.231s
10:43:19 AM: success write out redirect data - 0.000s
10:43:19 AM: success onPostBootstrap - 0.001s
10:43:19 AM: info bootstrap finished - 18.500s
10:43:19 AM: success write out requires - 0.002s
10:43:20 AM: warning `isModuleDeclaration` has been deprecated, please migrate to `isImportOrExportDeclaration`
10:43:20 AM: at isModuleDeclaration (/opt/build/repo/node_modules/@babel/types/lib/validators/generated/index.js:2748:35)
10:43:20 AM: at PluginPass.Program (/opt/build/repo/node_modules/babel-plugin-lodash/lib/index.js:102:44)
10:43:27 AM: success Building production JavaScript and CSS bundles - 8.027s
10:43:37 AM: success Building HTML renderer - 9.707s
10:43:37 AM: success Execute page configs - 0.034s
10:43:37 AM: success Caching Webpack compilations - 0.000s
10:43:37 AM: success run queries in workers - 0.046s - 11/11 240.27/s
10:43:37 AM: success Merge worker state - 0.002s
10:43:37 AM: success Rewriting compilation hashes - 0.000s
10:43:37 AM: success Writing page-data.json and slice-data.json files to public directory - 0.003s - 11/11 3694.75/s
10:43:44 AM: error Truncated page data information for the failed page "/blog/my-second-post/": {
10:43:44 AM: "errors": {},
10:43:44 AM: "path": "/blog/my-second-post/",
10:43:44 AM: "slicesMap": {},
10:43:44 AM: "pageContext": {
10:43:44 AM: "id": "7db4793e-ea7d-5624-a32e-85ccf3acfbd1",
10:43:44 AM: "frontmatter__slug": "my second post",
10:43:44 AM: "__params": {
10:43:44 AM: "frontmatter__slug": "my-second-post"
10:43:44 AM: },
10:43:44 AM: "frontmatter": {
10:43:44 AM: "title": "My second Post",
10:43:44 AM: "date": "2023-11-13",
10:43:44 AM: "slug": "my second post"
10:43:44 AM: }
10:43:44 AM: }
10:43:44 AM: }
10:43:44 AM: failed Building static HTML for pages - 3.991s
10:43:44 AM: error Building static HTML failed for path "/blog/my-second-post/"
10:43:44 AM:
10:43:44 AM: 60 | fontSize: "20px",
10:43:44 AM: 61 | fontWeight: 500
10:43:44 AM: > 62 | }, "TABLE OF CONTENTS"), data.mdx.tableOfContents.items.map(item => React.createElement(Box, {
10:43:44 AM: | ^
10:43:44 AM: 63 | key: item.title
10:43:44 AM: 64 | }, React.createElement(Box, {
10:43:44 AM: 65 | marginBottom: "10px"
10:43:44 AM:
10:43:44 AM: WebpackError: TypeError: Cannot read properties of null (reading "items")
10:43:44 AM:
10:43:44 AM: - {mdx.frontmatter__slug}.tsx:62
10:43:44 AM: nevermoresblog/src/pages/blog/{mdx.frontmatter__slug}.tsx:62:53
10:43:44 AM:
10:43:44 AM: - emotion-sheet.esm.js:55
10:43:44 AM: [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:55:1
10:43:44 AM:
10:43:44 AM: - emotion-sheet.esm.js:57
10:43:44 AM: [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:57:1
10:43:44 AM:
10:43:44 AM: - emotion-sheet.esm.js:63
10:43:44 AM: [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:63:1
10:43:44 AM:
10:43:44 AM: - emotion-sheet.esm.js:57
10:43:44 AM: [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:57:1
10:43:44 AM:
10:43:44 AM: - emotion-sheet.esm.js:63
10:43:44 AM: [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:63:1
10:43:44 AM:
10:43:44 AM: - emotion-sheet.esm.js:55
10:43:44 AM: [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:55:1
10:43:44 AM:
10:43:44 AM: - emotion-sheet.esm.js:57
10:43:44 AM: [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:57:1
10:43:44 AM:
10:43:44 AM: - emotion-sheet.esm.js:63
10:43:44 AM: [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:63:1
10:43:44 AM:
10:43:44 AM: - emotion-sheet.esm.js:66
10:43:44 AM: [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:66:1
10:43:44 AM:
10:43:44 AM: - Avatar.js:15
10:43:44 AM: [nevermoresblog]/[@mui]/material/Avatar/Avatar.js:15:1
10:43:44 AM:
10:43:44 AM: - emotion-sheet.esm.js:63
10:43:44 AM: [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:63:1
10:43:44 AM:
10:43:44 AM: - emotion-sheet.esm.js:57
10:43:44 AM: [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:57:1
10:43:44 AM:
10:43:44 AM: - emotion-sheet.esm.js:63
10:43:44 AM: [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:63:1
10:43:44 AM:
10:43:44 AM: - emotion-sheet.esm.js:57
10:43:44 AM: [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:57:1
10:43:44 AM:
10:43:44 AM: - emotion-sheet.esm.js:63
10:43:44 AM: [nevermoresblog]/[@emotion]/sheet/dist/emotion-sheet.esm.js:63:1
10:43:44 AM:
10:43:44 AM:
10:43:46 AM:
10:43:46 AM: "build.command" failed
10:43:46 AM: ────────────────────────────────────────────────────────────────
10:43:46 AM:
10:43:46 AM: Error message
10:43:46 AM: Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1)
10:43:46 AM:
10:43:46 AM: Error location
10:43:46 AM: In Build command from Netlify app:
10:43:46 AM: npm run build
10:43:46 AM:
10:43:46 AM: Resolved config
10:43:46 AM: build:
10:43:46 AM: command: npm run build
10:43:46 AM: commandOrigin: ui
10:43:46 AM: publish: /opt/build/repo/public
10:43:46 AM: publishOrigin: ui
10:43:46 AM: plugins:
10:43:46 AM: - inputs: {}
10:43:46 AM: origin: ui
10:43:46 AM: package: "@netlify/plugin-gatsby"
10:43:47 AM: Failed during stage "building site": Build script returned non-zero exit code: 2
10:43:47 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
10:43:47 AM: Failing build: Failed to build site
10:43:47 AM: Finished processing build request in 1m19.099s
I write a graphql query in my blog template which includes querying the field tableOfContents
export const query = graphql`
query ($id: String) {
mdx(id: {eq: $id}) {
frontmatter {
title
date(formatString: "MMMM D, YYYY")
}
tableOfContents
}
}
`
I can get the correct result in local development
However, the
tableOfContentsfield seems to be null as showed in the build logBtw, here is my definition for the type I declare the graphql query result as , where I extract the
tableOfContents field. You can also see how I render my page with the data.
import * as React from 'react'
import { Link, PageProps, graphql } from 'gatsby'
import Appbar from '../../components/appbar'
import { Avatar, Box, Paper, ThemeProvider, Typography } from '@mui/material'
import { ComponentsWrapper } from '../../components/mdxcomponent'
import { ThemeContext } from '@emotion/react'
import theme from '../../components/theme'
interface queryData {
mdx: {
frontmatter: {
title: string;
date: string;
}
tableOfContents:{
items:{
url:string;
title:string;
items:{
url:string;
title:string;
}[]
}[]
};
}
}
const BlogPostTemplate:React.FC<PageProps<queryData>> = ({path, data,children}) => {
return (
<Box>
<Appbar location={path}>
</Appbar>
<ThemeProvider theme={theme}>
<Box sx={{display:'flex',paddingLeft:"300px",pr:'300px',maxWidth:'1000px'}}>
<Paper sx={{flexGrow:2,padding:'50px'}} variant='outlined'>
<Typography variant='h3' mb={'20px'}>
{data.mdx.frontmatter.title}
</Typography>
<Box mb={'20px'}>
<Avatar src='/IMG_20220602_233112.JPG'>;
</Avatar>
<Typography sx={{marginTop:"10px"}} fontSize={'12px'}>
{'Nevermore'}
</Typography>
<Box display={'flex'} justifyContent={'space-between'}>
<Typography sx={{marginTop:'5px'}} variant="subtitle1" fontSize={'10px'} color={'gray'}>
{data.mdx.frontmatter.date}
</Typography>
</Box>
</Box>
<ComponentsWrapper>
{children}
</ComponentsWrapper>
</Paper>
<Box flexGrow={1} minWidth={'200px'} ml={'100px'} mt={'30px'} position={'fixed'} right={'100px'}>
<Typography sx={{mb:'20px', color:'gray'}} fontSize={'20px'} fontWeight={500} >
TABLE OF CONTENTS
</Typography>
{
data.mdx.tableOfContents.items.map((item)=>(
<Box key={item.title}>
<Box marginBottom={'10px'}>
<Link to={item.url} className='internalLink'>{item.title}</Link>
</Box>
{
item.items.map((item)=>(
<Box key={item.title} sx={{mb:'10px',ml:'40px'}}>
<Link to={item.url} className='internalLink'>{item.title}</Link>
</Box>
))
}
</Box>
))
}
</Box>
</Box>
</ThemeProvider>
</Box>
)
}
export default BlogPostTemplate;
export const query = graphql`
query ($id: String) {
mdx(id: {eq: $id}) {
frontmatter {
title
date(formatString: "MMMM D, YYYY")
}
tableOfContents
}
}
`
Why did this Happen? Thanks for support! 