noSyncScripts

Esta página aún no está disponible en tu idioma.

JavaScript (and super languages)

Summary

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:
- react
- next
Sources:
- Same as @next/no-sync-scripts

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noSyncScripts": "error"
6
      }
7
    }
8
  }
9
}

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

Invalid

1
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.

Valid

1
const Valid = () => {
2
  return (
3
    <>
4
      <script src="https://third-party-script.js" async />
5
      <script src="https://third-party-script.js" defer />
6
    </>
7
  );
8
}

Next.js

1
import Script from 'next/script'
2

3
const Valid = () => <Script src="https://third-party-script.js" />;