9 Mistakes AI Makes With Astro (and How to Spot Them)

AI tools learned Astro from tutorials, and most tutorials are old. The result is code that was right in 2024 and breaks in 2026. We’ve seen every item on this list, and we’ve checked each fix against Astro 7.4.

1. The content config in the wrong place

What AI writes: src/content/config.ts

What’s current: src/content.config.ts, directly inside src. Astro also expects a loader now:

import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';
import { z } from 'astro/zod';

const posts = defineCollection({
  loader: glob({ base: './src/content/posts', pattern: '**/*.md' }),
  schema: z.object({ title: z.string(), date: z.coerce.date() }),
});

export const collections = { posts };

How you’ll know: your blog shows nothing, or the build complains it can’t find the collection.

2. Old ways of reading posts

What AI writes: getEntryBySlug(), post.slug, or post.render()

What’s current: post.id for the address, and a separate render() function:

import { getCollection, render } from 'astro:content';
const { Content } = await render(post);

How you’ll know: errors about slug or render not existing.

3. The old Tailwind integration

What AI writes: npx astro add tailwind installing @astrojs/tailwind, plus a tailwind.config file

What’s current: the same command now installs the Tailwind Vite plugin and creates src/styles/global.css with one line, @import "tailwindcss";. There’s no config file. See how to add Tailwind to Astro.

How you’ll know: the AI tells you to create tailwind.config.mjs.

4. ViewTransitions instead of ClientRouter

What AI writes: import { ViewTransitions } from 'astro:transitions'

What’s current: import { ClientRouter } from 'astro:transitions', or just the CSS rule @view-transition { navigation: auto; } with no import at all. See page transitions in Astro.

5. Unclosed HTML tags

What AI writes: a <div> or <p> that never closes, which older Astro quietly fixed

What’s current: Astro 7 refuses to build it:

[CompilerError] Expected corresponding JSX closing tag for 'div'.

How you’ll know: exactly that error, with a file and line number.

6. Markdown plugins without the extra setup

What AI writes: remarkPlugins or rehypePlugins in your config, as if they just work

What’s current: Astro 7 uses a new Markdown processor, and those plugins need an extra package and a processor setting. If you don’t need the plugin, remove it. If you do, the Astro 7 upgrade guide has the steps.

7. Astro DB

What AI writes: @astrojs/db and astro:db for storing data

What’s current: Astro DB was removed in Astro 7. For a beginner site, use content collections. For a real database, see the best CMS for Astro or EmDash.

8. Words running together

What AI writes: inline elements on separate lines, like a <b> and an <i> one under the other

What’s current: Astro 7 removes the space between them, so “Hello world” can become “Helloworld”. Add an explicit {" "} between the elements when the space matters.

9. Too old a Node.js version

What AI writes: “Astro needs Node 18” or similar

What’s current: Astro 7 needs Node.js 22.23.4 or newer. Run node -v to check.

How to protect yourself

Say “Astro 7.4” in your first message, every time.
Connect your AI tool to the official Astro docs.
Run npm run build after every change. Most of these mistakes fail the build with a clear message, which is far better than failing quietly.
When in doubt, paste the AI’s code back and ask it to check for the items on this list. Prompt 10 in our prompt collection does exactly that.

Frequently asked questions

Why does AI produce outdated Astro code?

AI models learn from text written before a cutoff date, and Astro changed a lot in 2025 and 2026. Unless the tool checks the current docs, it reaches for what it saw most often, which is older code.

How do I stop these mistakes?

Tell the AI your Astro version, connect it to the official Astro docs, and run npm run build after every change. Most of these mistakes produce a clear error.