AstroJS - Accessible Astro Starter with DatoCMS fails to deploy at build

Support
,
1

Site name: strong-eclair-a3020a - this site isn’t deployed yet.

When running this site locally I don’t encounter any problems but when I try deploying at Netlify I get this error:

Build log:

1:19:27 PM: Netlify Build
1:19:27 PM: ────────────────────────────────────────────────────────────────
1:19:27 PM: ​
1:19:27 PM: ❯ Version
1:19:27 PM: @netlify/build 29.33.5
1:19:27 PM: ​
1:19:27 PM: ❯ Flags
1:19:27 PM: baseRelDir: true
1:19:27 PM: buildId: 65c0d1f3191198116d52139d
1:19:27 PM: deployId: 65c0d1f3191198116d52139f
1:19:27 PM: ​
1:19:27 PM: ❯ Current directory
1:19:27 PM: /opt/build/repo
1:19:27 PM: ​
1:19:27 PM: ❯ Config file
1:19:27 PM: No config file was defined: using default values.
1:19:27 PM: ​
1:19:27 PM: ❯ Context
1:19:27 PM: production
1:19:27 PM: ​
1:19:27 PM: Build command from Netlify app
1:19:27 PM: ────────────────────────────────────────────────────────────────
1:19:27 PM: ​
1:19:27 PM: $ npm run build
1:19:27 PM: > accessible-astro-starter@3.1.2 build
1:19:27 PM: > astro build
1:19:28 PM: 12:19:28 [build] output: “static”
1:19:28 PM: 12:19:28 [build] directory: /opt/build/repo/dist/
1:19:28 PM: 12:19:28 [build] Collecting build info…
1:19:28 PM: 12:19:28 [build] ✓ Completed in 82ms.
1:19:28 PM: 12:19:28 [build] Building static entrypoints…
1:19:31 PM: 12:19:31 [astro-icon] Loaded icons from ion, mdi
1:19:31 PM: 12:19:31 [WARN] [vite] [plugin:vite:reporter]
1:19:31 PM: (!) /opt/build/repo/src/layouts/MarkdownLayout.astro is dynamically imported by /opt/build/repo/src/pages/mdx-page.mdx but also statically imported by /opt/build/repo/src/pages/markdown-page.md, dynamic import will not move module into another chunk.
1:19:31 PM:
1:19:31 PM: 12:19:31 [build] ✓ Completed in 3.18s.
1:19:31 PM: building client (vite)
1:19:31 PM: 12:19:31 [vite] transforming…
1:19:32 PM: 12:19:32 [vite] ✓ 14 modules transformed.
1:19:32 PM: 12:19:32 [vite] rendering chunks…
1:19:32 PM: 12:19:32 [vite] computing gzip size…
1:19:32 PM: 12:19:32 [vite] dist/astro/hoisted.g7Bov203.js 17.57 kB │ gzip: 5.95 kB
1:19:32 PM: 12:19:32 [vite] ✓ built in 128ms
1:19:32 PM: generating static routes
1:19:32 PM: 12:19:32 :arrow_forward: src/pages/404.astro
1:19:32 PM: 12:19:32 └─ /404.html (+10ms)
1:19:32 PM: 12:19:32 :arrow_forward: src/pages/accessible-components.astro
1:19:32 PM: 12:19:32 └─ /accessible-components/index.html (+10ms)
1:19:32 PM: 12:19:32 :arrow_forward: src/pages/event/[post].astro
1:19:32 PM: undefined
1:19:32 PM: Cannot read properties of undefined (reading “map”)
1:19:32 PM: Stack trace:
1:19:32 PM: at Module.getStaticPaths$1 [as getStaticPaths] (file:///opt/build/repo/dist/chunks/prerender-hgn8ZaV.mjs:667:15)
1:19:32 PM: at async callGetStaticPaths (file:///opt/build/repo/node_modules/astro/dist/core/render/route-cache.js:28:17)
1:19:32 PM: at async generatePage (file:///opt/build/repo/node_modules/astro/dist/core/build/generate.js:241:19)
1:19:32 PM: at async staticBuild (file:///opt/build/repo/node_modules/astro/dist/core/build/static-build.js:96:7)
1:19:32 PM: at async AstroBuilder.run (file:///opt/build/repo/node_modules/astro/dist/core/build/index.js:169:7)
1:19:32 PM: at async build (file:///opt/build/repo/node_modules/astro/dist/cli/build/index.js:20:3)
1:19:32 PM: at async cli (file:///opt/build/repo/node_modules/astro/dist/cli/index.js:155:5)
1:19:32 PM: ​
1:19:32 PM: “build.command” failed
1:19:32 PM: ────────────────────────────────────────────────────────────────
1:19:32 PM: ​
1:19:32 PM: Error message
1:19:32 PM: Command failed with exit code 1: npm run build (Search results for '"non-zero exit code: 1"' - Netlify Support Forums)
1:19:32 PM: ​
1:19:32 PM: Error location
1:19:32 PM: In Build command from Netlify app:
1:19:32 PM: npm run build
1:19:32 PM: ​
1:19:32 PM: Resolved config
1:19:32 PM: build:
1:19:32 PM: command: npm run build
1:19:32 PM: commandOrigin: ui
1:19:32 PM: environment:
1:19:32 PM: - DATOCMS_API_KEY
1:19:32 PM: - DATO_API_TOKEN
1:19:32 PM: publish: /opt/build/repo/dist
1:19:32 PM: publishOrigin: ui
1:19:33 PM: Failed during stage “building site”: Build script returned non-zero exit code: 2
1:19:33 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
1:19:33 PM: Failing build: Failed to build site
1:19:33 PM: Finished processing build request in 54.324s

It seems to be a problem with the function getStaticPaths. My code in [post].astro looks like this:

import DefaultLayout from ‘…/…/layouts/DefaultLayout.astro’
import { Breadcrumbs, BreadcrumbsItem, Media } from ‘accessible-astro-components’

export async function getStaticPaths() {
const response = await fetch(‘https://graphql.datocms.com/’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
Accept: ‘application/json’,
Authorization: Bearer ${import.meta.env.DATOCMS_API_KEY},
},
body: JSON.stringify({
query: query BlogPosts { allBlogPosts { id title body eventStartDate image { url } } },
}),
});

const json = await response.json();
const data = json.data.allBlogPosts;

console.log(data)

return data.map((post) => {
return {
params: { post: post.title.replaceAll(’ ', ‘-’).toLowerCase() },
props: { post },
}
})

}

const { post } = Astro.props

{post.title}


Evenemanget startar: {post.eventStartDate}

{post.body}

ul { display: grid; grid-template-columns: 1fr; grid-gap: 4rem; @media (min-width: 550px) { grid-template-columns: repeat(2, 1fr); grid-gap: 2rem; } @media (min-width: 950px) { grid-template-columns: repeat(3, 1fr); } }

Has anyone encountered the same problems?

2

@SteelRyder The error is:

1:19:32 PM: Cannot read properties of undefined (reading “map”)

Which as you’ve surmised is probably occuring in src/pages/event/[post].astro due to it being mentioned just prior.

I don’t work with Astro myself, but you can see that data is ending up undefined and it’s the data.map((post) => { causing the error.

With this code:

const json = await response.json();
const data = json.data.allBlogPosts;

console.log(data)

return data.map((post) => {

Your console.log(data) is reporting as undefined in the log:

1:19:32 PM: undefined

You should make sure your fetch is working and returning the right response and that the data is in the right place in the response.json(). I’d expect that json.data.allBlogPosts is correct though, since as you mention it works locally.

Perhaps your environment variable (import.meta.env.DATOCMS_API_KEY) isn’t set correctly on Netlify?

3

Hi @nathanmartin,

Thanks for the reply!

I added a check to se if there is data coming in:

if (!data || data.length === 0) {
console.error(“No data received from DatoCMS”);
return { paths: , fallback: true };
}

Which returned:

“No data received from DatoCMS”

Kind of strange since it’s working locally. I have added the environment variable in the Netlify UI, but maybe I’ve done something wrong…

4

@SteelRyder That check hasn’t told you anything that you didn’t already know.

Your previous console.log(data) had already confirmed that data was undefined.

You should instead check what json or json.data is.

The fact it doesn’t complain when trying to access json.data.allBlogPosts indicates that json.data is “something”, (it just doesn’t contain a value for the key of allBlogPosts).

Perhaps it’s an error response from DataCMS that’ll point you in the right direction, but you won’t know without checking.

5

Hi!

FYI, the issue is solved.

Turned out I used the wrong api-key from DatoCMS. I used the all access key, when I should’ve used the Read only-key.

Thanks for the help!

6

Thanks for writing back in and sharing your solution! :+1:t6: