Astro provides several different tools to help you troubleshoot and debug your code.
Tips and tricksSection titled Tips and tricks
Debugging with Section titled Debugging with console.log()
console.log() is a simple-but-popular method of debugging your Astro code. Where you write your
console.log() statement will determine where your debugging output is printed:
console.log() statement in Astro frontmatter will always output to the terminal running the Astro CLI. This is because Astro runs on the server, and never in the browser.
Code that is written or imported inside of an Astro
<script> tag is run in the browser. Any
console.log() statements or other debug output will be printed to the console in your browser.
Debugging framework componentsSection titled Debugging framework components
Framework components (like React and Svelte) are unique: They render server-side by default, meaning that
console.log() debug output will be visible in the terminal. However, they can also be hydrated for the browser, which may cause your debug logs to also appear in the browser.
This can be useful for debugging differences between the SSR output and the hydrated components in the browser.
Astro Section titled Astro <Debug /> component
<Debug /> component
To help you debug your Astro components, Astro provides a built-in
<Debug /> component which renders any value directly into your component HTML template. This is useful for quick debugging in the browser without having to flip back-and-forth between your terminal and your browser.
The Debug component supports a variety of syntax options for even more flexible and concise debugging:
Common Error MessagesSection titled Common Error Messages
Here are some common error messages you might see in the terminal, what they might mean, and what to do about them. See our full error reference guide for a complete list of Astro errors you may encounter.
Cannot use import statement outside a moduleSection titled Cannot use import statement outside a module
Solution: If you have added any attributes to your
<script> tag, you must also add the
type="module" attribute to be able to use import statements.
Status: Expected Astro behavior, as intended.
Not sure that this is your problem?
Check to see if anyone else has reported this issue!
Section titled document (or window) is not defined
window) is not defined
This error occurs when trying to access
window on the server.
Astro components run on the server, so you can’t access these browser-specific objects within the frontmatter.
Framework components run on the server by default, so this error can occur when accessing
window during rendering.
Solution: Determine the code that calls
window. If you aren’t using
window directly and still getting this error, check to see if any packages you’re importing are meant to run on the client.
If the code is in an Astro component, move it to a
<script>tag outside of the frontmatter. This tells Astro to run this code on the client, where
If the code is in a framework component, try to access these objects after rendering using lifecycle methods (e.g.
onMounted()in Vue, and
onMount()in Svelte). Tell the framework component to hydrate client-side by using a client: directive, like
client:load, to run these lifecycle methods. You can also prevent the component from rendering on the server at all by adding the
Status: Expected Astro behavior, as intended.
Expected a default exportSection titled Expected a default export
This error can be thrown when trying to import or render an invalid component, or one that is not working properly. (This particular message occurs because of the way importing a UI component works in Astro.)
Solution: Try looking for errors in any component you are importing and rendering, and make sure it’s working correctly. Consider opening an Astro starter template from astro.new and troubleshooting just your component in a minimal Astro project.
Status: Expected Astro behavior, as intended.
Refused to execute inline scriptSection titled Refused to execute inline script
You may see the following error logged in the browser console:
Refused to execute inline script because it violates the following Content Security Policy directive: …
This means that your site’s Content Security Policy (CSP) disallows running inline
<script> tags, which Astro outputs by default.
Solution: Update your CSP to include
script-src: 'unsafe-inline' to allow inline scripts to run.
Common gotchasSection titled Common gotchas
My component is not renderingSection titled My component is not rendering
Then check your import statement:
Is your import linking to the wrong place? (Check your import path.)
Does your import have the same name as the imported component? (Check your component name and that it follows the
Have you included the extension in the import? (Check that your imported file contains an extension. e.g.
.svelte. Note: File extensions are not required for
My component is not interactiveSection titled My component is not interactive
If your component is rendering (see above) but is not responding to user interaction, then you may be missing a
client:* directive to hydrate your component.
By default, a UI Framework component is not hydrated in the client. If no
Cannot find package ‘X’Section titled Cannot find package ‘X’
If you see a
"Cannot find package 'react'" (or similar) warning when you start up Astro, that means that you need to install that package into your project. Not all package managers will install peer dependencies for you automatically. If you are on Node v16+ and using npm, you should not need to worry about this section.
React, for example, is a peer dependency of the
@astrojs/react integration. That means that you should install the official
react-dom packages alongside your integration. The integration will then pull from these packages automatically.
See Astro’s integration guide for instructions on adding framework renderers, CSS tools and other packages to Astro.
Section titled Astro.glob() - no matches found
Astro.glob() - no matches found
Astro.glob() to import files, be sure to use the correct glob syntax that will match all the files you need.
FilepathsSection titled Filepaths
For example, use
src/pages/index.astro to import both of the following files:
Supported ValuesSection titled Supported Values
Astro.glob() does not support dynamic variables and string interpolation.
This is not a bug in Astro. It is due to a limitation of Vite’s
import.meta.glob() function which only supports static string literals.
A common workaround is to instead import a larger set of files that includes all the files you need using
Astro.glob(), then filter them:
Using Astro with Yarn 2+ (Berry)Section titled Using Astro with Yarn 2+ (Berry)
Yarn 2+, a.k.a. Berry, uses a technique called Plug’n’Play (PnP) to store and manage Node modules, which can cause problems while initializing a new Astro project using
create astro or while working with Astro. A workaround is to set the
nodeLinker property in
Adding dependencies to Astro in a monorepoSection titled Adding dependencies to Astro in a monorepo
When working with Astro in a monorepo setup, project dependencies should be added in each project’s own
However, you may also want to use Astro in the root of the monorepo (e.g. Nx projects recommend installing dependencies at the root). In this case, manually add Astro-related dependencies (e.g.
astro-component-lib) to the
vite.ssr.noExternal part of Astro’s config to ensure that these dependencies are properly installed and bundled:
Using Section titled Using <head> in a component
<head> in a component
In Astro, using a
<head> tag works like any other HTML tag: it does not get moved to the top of the page or merged with the existing
<head>. Because of this, you usually only want to include one
<head> tag throughout a page. We recommend writing that single
<head> and its contents in a layout component.
An unexpected Section titled An unexpected <script> or <style> is included
<style> is included
You may notice an imported component’s
<style> tags included in your HTML source even if that component doesn’t appear in the final output. For example, this will occur with conditionally rendered components that are not displayed.
Astro’s build process works on the module graph: once a component is included in the template, its
<style> tags are processed, optimized, and bundled, whether it appears in the final output or not. This does not apply to scripts when the
is:inline directive is applied.
Creating minimal reproductionsSection titled Creating minimal reproductions
When troubleshooting your code, it can be helpful to create a minimal reproduction of the issue that you can share. This is a smaller, simplified Astro project that demonstrates your issue. Having a working reproduction in a new project helps to confirm that this is a repeatable problem, and is not caused by something else in your personal environment or existing project.
Sharing a minimal reproduction is helpful when asking for help in our support threads and is often required when filing a bug report to Astro.
You can use astro.new to create a new Astro project with a single click. For minimal reproductions, we strongly recommend starting from the minimal (empty) example running in StackBlitz, with as little extra code as possible.
StackBlitz will run this Astro project in the browser, outside of your local environment. It will also provide you with a shareable link so that any Astro maintainer or support squad member can view your minimal reproduction outside of their own local environment. This means that everyone is viewing the exact same project, with the same configuration and dependencies. This makes it easy for someone else to help troubleshoot your code. If the issue is reproducible, it allows you to verify that the issue lies within the Astro code itself and you can feel confident submitting a bug report.
Note that not every issue is reproducible in StackBlitz. For example, your issue might be dependent on a specific environment or package manager, or it may involve HTML Streaming, which isn’t supported in StackBlitz. In this case, create a new minimal (empty) Astro project using the CLI, reproduce the issue, and upload it to a GitHub repository. Instead of sharing a StackBlitz URL, provide a link to the GitHub repository of your minimal reproduction.
Minimal codeSection titled Minimal code
Once your empty project is set up, go through the steps to reproduce the issue. This can include adding packages, changing configuration, and writing code.
You should only add the minimum amount of code necessary to reproduce the issue. Do not reproduce other elements of your existing project, and remove all code that is not directly related to the issue.
Create an issueSection titled Create an issue
If your issue can be reproduced, then it is time to create an issue and file a bug report!
Go to the appropriate Astro repository on GitHub and open a new issue. Most repositories have an issue template that will ask questions or require information in order to submit. It’s important that you follow these templates because if you don’t provide the information we need, then we have to ask you for it… and no one is working on your issue!
Include the link to your minimal reproduction on StackBlitz (or GitHub repository, if necessary). Start with a description of the expected versus actual behavior to provide context for the issue. Then, include clear, step-by-step instructions on how to replicate the issue in an Astro project.
Need more?Section titled Need more?
Come and chat with us on Discord and explain your issue in the
#support forum channel. We’re always happy to help!
Visit the current open Issues in Astro to see if you are encountering a known problem or file a bug report.
You can also visit RFC Discussions to see whether you’ve found a known limitation of Astro, and check to see whether there are current proposals related to your use case.