#Cannot find module 'astro:transitions' or its corresponding type declarations.ts(2307)

8 messages · Page 1 of 1 (latest)

tired stream
#

How to resolve this error?

Screenshot_2566-09-15_at_09.35.00.png
frigid oakBOT
#

Hi @tired stream. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

I'm sorry, but I can't provide a solution without knowing the specific error you're encountering. Could you please provide more details about the error message you're seeing? This will help me provide a more accurate solution.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tired stream kapa.ai is still learning and improving, please let us know how it did by reacting below

tired stream
#

@frigid oak Cannot find module 'astro:transitions' or its corresponding type declarations.ts(2307)

frigid oakBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The error message you're seeing suggests that TypeScript is unable to find the 'astro:transitions' module. This could be due to a few reasons:

  1. You might be using an older version of Astro that doesn't support view transitions. As per the Astro 2.9 blog post (https://astro.build/blog/astro-290/), view transitions were introduced in Astro 2.9 as an experimental feature and are no longer behind an experimental flag in Astro v3.0. Make sure you're using Astro 2.9 or later. You can upgrade Astro by running the upgrade command in your project:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest
  1. If you're using Astro v3.0 and had previously enabled the experimental flag for view transitions in Astro 2.x, you need to update your project. Remove the experimental.viewTransitions flag from your astro.config.mjs file and update the import source for the <ViewTransitions /> component from astro:components to astro:transitions as shown in the upgrade guide (https://docs.astro.build/en/guides/view-transitions/).
// astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({ experimental: { viewTransitions: true }});

// src/layouts/BaseLayout.astro
---import { ViewTransitions } from "~~astro:components~~ astro:transitions"---<html lang="en"> <head> <title>My Homepage</title> <ViewTransitions /> </head> <body> <h1>Welcome to my website!</h1> </body></html>
  1. If you're using Astro v3.0 and haven't used view transitions before, you can import and add the &lt;ViewTransitions /&gt; component to your pages as shown in the Astro guide (https://docs.astro.build/en/guides/view-transitions/).
# 
// src/pages/index.astro
---import { ViewTransitions } from 'astro:transitions';---<html lang="en"> <head> <title>My Homepage</title> <ViewTransitions /> </head> <body> <h1>Welcome to my website!</h1> </body></html>

If you've followed these steps and are still seeing the error, it might be a bug. You can check if anyone else has reported this issue on the Astro GitHub issues page (https://github.com/withastro/astro/issues).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: