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

AI tools learned Astro from tutorials. Most tutorials are old. So the code was right in 2024 and breaks in 2026. We have seen every item on this list. We 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, right inside src. Astro also expects a loader now. A loader tells Astro where to find your posts:

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. A build is making the finished copy of your site.

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 that say slug or render does not exist.

3. The old Tailwind integration

Tailwind is a popular tool for styling pages. An integration is an add-on for Astro.

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

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

How you’ll know: the AI tells you to make 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. Older Astro quietly fixed this.

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. 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. For example, 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. Node.js is the program that runs Astro on your computer. 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. That is far better than failing quietly.
• When in doubt, paste the AI’s code back. Ask it to check for the items on this list. Prompt 10 in our prompt collection does just that.

Frequently asked questions

Why does AI produce outdated Astro code?

AI models learn from text written before a cutoff date. 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. Run npm run build after every change. Most of these mistakes produce a clear error.