noUnwantedPolyfillio

JSX and TSX

Summary

Diagnostic Category: lint/nursery/noUnwantedPolyfillio
This rule doesn’t have a fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- next
Sources:
- Same as @next/no-unwanted-polyfillio

Description

Prevent duplicate polyfills from Polyfill.io.

You are using polyfills from Polyfill.io and including polyfills already shipped with Next.js. This unnecessarily increases page weight which can affect loading performance.

Examples

Invalid

1
<script src='https://polyfill.io/v3/polyfill.min.js?features=AbortController,Object.fromEntries'></script>

code-block.jsx:1:13 lint/nursery/noUnwantedPolyfillio ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Prevent duplicate polyfills from Polyfill.io
  
  > 1 │ <script src=‘https://polyfill.io/v3/polyfill.min.js?features=AbortController,Object.fromEntries’&gt;&lt;/script>
      │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Object.fromEntries is already shipped with Next.js.
  
  ℹ This unnecessarily increases page weight which can affect loading performance.

1
import NextScript from 'next/script';
2

3
export function MyApp({ Component, pageProps }) {
4
  return <NextScript src='https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.copyWithin' />
5
}

code-block.jsx:4:26 lint/nursery/noUnwantedPolyfillio ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Prevent duplicate polyfills from Polyfill.io
  
    3 │ export function MyApp({ Component, pageProps }) {
  > 4 │   return <NextScript src=‘https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.copyWithin’ />
      │                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    5 │ }
    6 │ 
  
  ℹ Array.prototype.copyWithin is already shipped with Next.js.
  
  ℹ This unnecessarily increases page weight which can affect loading performance.

Valid

1
<>
2
  <script src='https://polyfill.io/v3/polyfill.min.js?features=AbortController'></script>
3
  <script src='https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver'></script>
4
  <Script src='https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver' />
5
  <Script src='https://polyfill-fastly.io/v3/polyfill.min.js?features=IntersectionObserver' />
6
</>

How to configure

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