noSyncScripts
Summary
Section titled “Summary”- Rule available since:
v2.3.6 - Diagnostic Category:
lint/nursery/noSyncScripts - This rule doesn’t have a fix.
- The default severity of this rule is information.
- Sources:
- Same as
@next/next/no-sync-scripts
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "noSyncScripts": "error" } } }}Description
Section titled “Description”Prevent the usage of synchronous scripts.
A synchronous script can impact your webpage performance, read more on how to Efficiently load third-party JavaScript.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<script src=""></script>code-block.html:1:1 lint/nursery/noSyncScripts ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ Unexpected synchronous script.
> 1 │ <script src=""></script>
│ ^^^^^^^^^^^^^^^
2 │
ℹ Synchronous scripts can impact your webpage performance. Add the “async” or “defer” attribute.
<script src="" async></script><script src="" defer></script>Related links
Section titled “Related links”Summary
Section titled “Summary”- Rule available since:
v2.3.6 - Diagnostic Category:
lint/nursery/noSyncScripts - This rule doesn’t have a fix.
- The default severity of this rule is information.
- This rule belongs to the following domains:
- Sources:
- Same as
@next/next/no-sync-scripts
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "noSyncScripts": "error" } } }}Description
Section titled “Description”Prevent the usage of synchronous scripts.
A synchronous script can impact your webpage performance, read more on how to Efficiently load third-party JavaScript.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”const Invalid = () => <script src="https://third-party-script.js" />;code-block.jsx:1:23 lint/nursery/noSyncScripts ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ Unexpected synchronous script.
> 1 │ const Invalid = () => <script src=“https://third-party-script.js” />;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Synchronous scripts can impact your webpage performance. Add the “async” or “defer” attribute. If using Next.js, consider the Script component instead.
const Valid = () => { return ( <> <script src="https://third-party-script.js" async /> <script src="https://third-party-script.js" defer /> </> );}Next.js
Section titled “Next.js”import Script from 'next/script'
const Valid = () => <Script src="https://third-party-script.js" />;Related links
Section titled “Related links”Copyright (c) 2023-present Biome Developers and Contributors.