Astro
Upgrade to Astro v7
Upgrade to Astro v7
export default defineConfig({
// specify a different file for advanced routing configuration:
fetchFile: './src/router.ts',
// or disable advanced routing entirely:
// fetchFile: null,
});
```- Rename your file to something else (e.g.
src/fetcher.ts,src/main.ts), and update any imports that reference it.
New default Markdown processor: Sätteri
Astro now renders your .md and .mdx files with Sätteri, its native Markdown pipeline, instead of the remark/rehype pipeline. As a result, @astrojs/markdown-remark is no longer installed by default.
What should I do?
If you don't use remark or rehype plugins, you don't need to do anything. Your Markdown and MDX will now be rendered by Sätteri, which applies GitHub-Flavored Markdown and SmartyPants just like before.
If you depend on remark and rehype plugins, you can port them to Sätteri MDAST or HAST plugins. If you depend on recma plugins, or if you are not yet ready or able to port your remark and rehype plugins, you can stay on the unified() pipeline.
To keep using unified plugins:
Install
@astrojs/markdown-remark:```shell npm install @astrojs/markdown-remark ``` ```shell pnpm add @astrojs/markdown-remark ``` ```shell yarn add @astrojs/markdown-remark ``` Set
unified()as your Markdown processor:import { defineConfig } from 'astro/config'; import { unified } from '@astrojs/markdown-remark'; export default defineConfig({ markdown: { processor: unified(), }, });
The deprecated markdown.remarkPlugins, markdown.rehypePlugins, and markdown.remarkRehype options still work, but now also require @astrojs/markdown-remark to be installed.
New default whitespace handling: compressHTML: 'jsx'
In Astro v6.x, whitespace handling used HTML-aware compression by default. This means that Astro would preserve a single space between inline elements, following HTML rules.
In Astro v7.0, the default value of compressHTML has changed from true to 'jsx'. Now, Astro strips whitespace from your HTML using JSX rules by default, the same way frameworks like React do.
The following example would render as helloworld in Astro v7.0, instead of hello world in Astro v6.x:
<span>hello</span>
<em>world</em>What should I do?
Visually inspect your website to ensure that the spaces between elements are rendered as expected. You may not need to take any further action.
If you notice that some spaces are missing, identify the components and pages where you are using inline elements. Then, update them to add an explicit space between these elements using {" "}:
<span>hello</span>
<em>world</em>
<span>hello</span> <em>world</em>If you prefer to keep the previous behavior, set compressHTML to true. You can also use compressHTML: false to preserve all whitespace.
Deprecated
The following deprecated features are no longer supported and are no longer documented. Please update your project accordingly.
Some deprecated features may temporarily continue to function until they are completely removed. Others may silently have no effect, or throw an error prompting you to update your code.
Deprecated: getContainerRenderer() from integration package roots
In Astro 6.x, the getContainerRenderer() helper used with the Container API was imported from an official integration's package root (e.g. @astrojs/react). This could cause bundlers to pull in unrelated, build-time-only exports from the package root when only the Container API was needed.
Astro 7.0 deprecates importing getContainerRenderer() from an integration's package root in favor of a dedicated container-renderer entrypoint.
What should I do?
Update your Container API imports to use the new container-renderer entrypoint for each official integration:
- import { getContainerRenderer } from '@astrojs/react';
+ import { getContainerRenderer } from '@astrojs/react/container-renderer';This entrypoint is available for @astrojs/react, @astrojs/preact, @astrojs/solid-js, @astrojs/svelte, @astrojs/vue, and @astrojs/mdx.
Removed
The following features have now been entirely removed from the code base and can no longer be used. Some of these features may have continued to work in your project even after deprecation. Others may have silently had no effect.
Projects now containing these removed features will be unable to build, and there will no longer be any supporting documentation prompting you to remove these features.
Removed: @astrojs/db
The @astrojs/db package has been removed in Astro v7.0 and is no longer maintained.
What should I do?
Remove @astrojs/db from your project's dependencies and replace it with one of the following alternatives:
Node.js built-in SQLite: Node.js now includes a built-in
node:sqlitemodule (available since Node.js v22.5.0). This is a good option if you are using the Node.js adapter and were using@astrojs/dbfor local SQLite storage.Drizzle ORM: If you were using
@astrojs/dbfor its Drizzle-based schema and query API, you can use Drizzle directly with any supported database.Other database libraries: Use any database library that suits your deployment platform (e.g. Turso, PlanetScale, Neon).
Removed: exposed astro:transitions internals
In Astro 6.x, some helpers available in astro:transitions and astro:transitions/client were deprecated.
In Astro 7.0, the following APIs can no longer be used in your project:
TRANSITION_BEFORE_PREPARATIONTRANSITION_AFTER_PREPARATIONTRANSITION_BEFORE_SWAPTRANSITION_AFTER_SWAPTRANSITION_PAGE_LOADisTransitionBeforePreparationEvent()isTransitionBeforeSwapEvent()createAnimationScope()
What should I do?
Remove any occurrence of createAnimationScope():
-import { createAnimationScope } from 'astro:transitions';Replace any occurrence of the other APIs using the lifecycle event names directly:
-import {
- TRANSITION_AFTER_SWAP,
- isTransitionBeforePreparationEvent,
-} from 'astro:transitions/client';
-console.log(isTransitionBeforePreparationEvent(event));
+console.log(event.type === 'astro:before-preparation');
-console.log(TRANSITION_AFTER_SWAP);
+console.log('astro:after-swap');