Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/docs/en/guides/client-side-scripts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ To prevent Astro from processing a script, add the `is:inline` directive.
```

:::note
Astro will not process your script tags in some situations. In particular, adding `type="module"` or any attribute other than `src` to a `<script>` tag will cause Astro to treat the tag as if it had an `is:inline` directive. The same will be true when the script is written in a JSX expression.
Astro will not process your script tags in some situations. In particular, adding `type="module"` or any attribute other than `src` to a `<script>` tag will cause Astro to treat the tag as if it had an `is:inline` directive.
:::

<ReadMore>See our [directives reference](/en/reference/directives-reference/#script--style-directives) page for more information about the directives available on `<script>` tags.</ReadMore>
Expand Down
19 changes: 17 additions & 2 deletions src/content/docs/en/guides/upgrade-to/v5.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -531,14 +531,29 @@ In the event of route collisions, where two routes of equal route priority attem

<SourcePR number="11791" title="Make directRenderScript the default"/>

In Astro v4.x, `experimental.directRenderScript` was an optional flag to directly render `<scripts>` as declared in `.astro` files (including existing features like TypeScript, importing `node_modules`, and deduplicating scripts). This strategy prevented scripts from being executed in places where they were not used.
In Astro v4.x, `experimental.directRenderScript` was an optional flag to directly render `<scripts>` as declared in `.astro` files (including existing features like TypeScript, importing `node_modules`, and deduplicating scripts). This strategy prevented scripts from being executed in places where they were not used. Additionally, conditionally rendered scripts were previously implicitly inlined, as if an `is:inline` directive was automatically added to them.

Astro 5.0 removes this experimental flag and makes this the new default behavior in Astro: scripts are no longer hoisted to the `<head>`, multiple scripts on a page are no longer bundled together, and a `<script>` tag may interfere with CSS styling.
Astro 5.0 removes this experimental flag and makes this the new default behavior in Astro: scripts are no longer hoisted to the `<head>`, multiple scripts on a page are no longer bundled together, and a `<script>` tag may interfere with CSS styling. Additionally, conditionally rendered scripts are no longer implicitly inlined.

#### What should I do?

Please review your `<script>` tags and ensure they behave as desired.

If you previously had conditionally rendered `<script>` tags, you will need to add an `is:inline` attribute to preserve the same behavior as before:

```astro title="src/components/MyComponent.astro" ins="is:inline"
---
type Props
showAlert: boolean
}

const { showAlert } = Astro.props;
---
{
showAlert && <script is:inline>alert("Some very important code!!")</script>
}
```

<ReadMore>Read more about [using `script` tags in Astro](/en/guides/client-side-scripts/#using-script-in-astro).</ReadMore>

## Breaking Changes
Expand Down
Loading