Netlify build error using dynamic routes | Astro Lounge | Page 1

faint ledge Oct 5, 2022, 7:29 PM

#

I'm not sure what to make of this error when trying to build on Netlify.

3:26:06 PM:  error   Expected "category" to be a string
3:26:06 PM:   Code:
3:26:06 PM:       236 |             var typeOfMessage = repeat ? "an array" : "a string";
3:26:06 PM:     > 237 |             throw new TypeError("Expected \"".concat(token.name, "\" to be ").concat(typeOfMessage));
3:26:06 PM:           |                   ^
3:26:06 PM:       238 |         }
3:26:06 PM:       239 |         return path;
3:26:06 PM:       240 |     };
3:26:06 PM:

#

things work as expected with ntl dev

#

when I run npx astro build I'm getting this error, which is different

▶ src/pages/index.astro
 error   Cannot destructure property 'blogPostCollection' of 'response' as it is undefined.```

#

this is the code from my file pulling in content from Contentful

  const posts = await getContentfulContent({ query: allPosts });

  let paths = posts.blogPostCollection.items.map((post) => {
    return {
      params: { slug: HELPER.removeSlash(post.slug) },
      props: { post },
    };
  });
  return paths;
}

const { post } = Astro.props;```

**EDIT:** the reason the above isn't working is because my env variables are stored in Netlify and `npx astro build` isn't getting them to call Contentful successfully

steel crag Oct 5, 2022, 7:52 PM

#

Maybe a silly question, but are you sure all necessary environment variables for accessing Contentful are available to your Netlify build? Expected "category" to be a string" sounds like getStaticPaths() wasn't able to receive the contents from getContentfulContent -- could explain why it works in dev, but doesn't explain your local build error running npx astro build.

faint ledge Oct 5, 2022, 7:53 PM

#

actually... it's even sillier. I didn't have the Netlify SSR adapter installed 😭

steel crag Oct 5, 2022, 7:54 PM

#

Lot's of little details in these kinds of projects! Happens to me often haunted

faint ledge Oct 5, 2022, 7:56 PM

#

yeah. but now here's a question. after enabling the adapter, I have the output path in my astro config set to dist/blog, but it's still building to dist/. before the adapter it was properly building the dist/blog

steel crag Oct 5, 2022, 7:56 PM

#

Do you have a netlify.toml?

faint ledge Oct 5, 2022, 7:56 PM

#

I do

#

I guess I need to set that up properly

steel crag Oct 5, 2022, 7:57 PM

#

netlify.toml:

[build]
  # Directory to change to before starting a build.
  # This is where we will look for package.json/.nvmrc/etc.
  # If not set, defaults to the root directory.
  base = "project/"

  # Directory that contains the deploy-ready HTML files and
  # assets generated by the build. This is relative to the base
  # directory if one has been set, or the root directory if
  # a base has not been set. This sample publishes the directory
  # located at the absolute path "root/project/build-output"

  publish = "build-output/"

#

https://docs.netlify.com/configure-builds/file-based-configuration/

File-based configuration

Use a netlify.toml configuration file to specify how the platform builds and deploys your project.

#

I believe you'll need to make sure to set it there

faint ledge Oct 5, 2022, 8:01 PM

#

yeah. messing with this now. my setup has been a real struggle. I'm trying to get the site to build on the netlify server at www.site.com/blog and not at www.site.com but can't seem to figure out the right path forward

#

we're using different stacks for our www site and blog. so battling reverse proxy stuff and I'm losing my mind 😂

steel crag Oct 5, 2022, 8:03 PM

#

yikes -- sounds scary!

faint ledge Oct 5, 2022, 8:07 PM

#

[SOLVED] Netlify build error using dynamic routes

faint ledge Oct 5, 2022, 8:23 PM

#

Netlify build error using dynamic routes

#

well this is a mess. so the adapter wasn't necessary and didn't fix this problem

mighty harbor Oct 5, 2022, 8:24 PM

#

Oh wow, this is very strange...

faint ledge Oct 5, 2022, 8:26 PM

#

so disregard the npx astro build errors. that's no longer relevant, but I didn't want to delete to comments

mighty harbor Oct 5, 2022, 8:26 PM

#

Alright, what's the error now?

faint ledge Oct 5, 2022, 8:26 PM

#

the original posted error at the top

mighty harbor Oct 5, 2022, 8:31 PM

#

  let paths = posts.blogPostCollection.items.map((post) => {
    return {
-      params: { slug: HELPER.removeSlash(post.slug) },
+      params: { category: HELPER.removeSlash(post.slug) },
      props: { post },
    };
  });

#

3:26:06 PM: ▶ src/pages/[category]/index.astro
3:26:06 PM:  error   Expected "category" to be a string

means that params should return a property named "category"

faint ledge Oct 5, 2022, 8:36 PM

#

so the error you're referencing there is the error from running npx astro build. and slug there is actually correct.

mighty harbor Oct 5, 2022, 8:37 PM

#

But the file looks to be src/pages/[category]/index.astro? So you need to return a value for the category param

faint ledge Oct 5, 2022, 8:38 PM

#

this is the code in [category]/index.html

import { allPosts } from "../../utils/queries.js";
import { getContentfulContent } from "../../utils/contentful.js";
import BaseLayout from "../../layouts/BaseLayout.astro";
import CategoryLayout from "../../layouts/CategoryLayout.astro";

const { post } = Astro.props;

export async function getStaticPaths() {
  return [
    { params: { slug: "internal-comms" } },
    { params: { slug: "product" } },
    { params: { slug: "leadership" } },
  ];
}
---

<BaseLayout>
  <CategoryLayout />
</BaseLayout>```

#

I'm just using static params to test locally

mighty harbor Oct 5, 2022, 8:38 PM

#

faint ledge this is the code in `[category]/index.html` ```--- import { allPosts } from ".....

export async function getStaticPaths() {
  return [
    // Generates: /category/internal-comms
    { params: { category: "internal-comms" } },
    { params: { category: "product" } },
    { params: { category: "leadership" } },
  ];
}

faint ledge Oct 5, 2022, 8:39 PM

#

oh shit...

#

omg

#

🫣

mighty harbor Oct 5, 2022, 8:39 PM

#

slug is not a magical thing. The params object needs to match the names inside the [dynamic-path]

faint ledge Oct 5, 2022, 8:40 PM

#

why does this always happen when I don't step away from the computer when I should.

mighty harbor Oct 5, 2022, 8:40 PM

#

Lol no worries! I bet our docs/error messages could be a bit more helpful here 🙂

faint ledge Oct 5, 2022, 8:40 PM

#

wild that it works in dev

#

I'm 2/2 in edge cases for docs today 😂

mighty harbor Oct 5, 2022, 8:40 PM

#

Hmm, why would it work in dev?

faint ledge Oct 5, 2022, 8:41 PM

#

I don't know, but it works in dev

mighty harbor Oct 5, 2022, 8:41 PM

#

Oh maybe we're not enforcing that it matches something returned from getStaticPaths?

#

I'll open an issue about that

faint ledge Oct 5, 2022, 8:41 PM

#

wait I lied. just realizing that the stackblitz I was running was category and my vscode was using slug

#

ugghhhhh

#

I need to get up.

mighty harbor Oct 5, 2022, 8:42 PM

#

Ohhh OK that's significantly less confusing!

#

But yeah, things like this are hard to catch! I bet our error message could help guide you to the right answer, though

faint ledge Oct 5, 2022, 8:43 PM

#

I'll leave that up to you fine devs to decide. thank you for taking the time though. one of these days when I'm an expert I'll join support and give back

#Netlify build error using dynamic routes