src/content/docs/linter/rules/no-unwanted-polyfillio.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v2.0.0` - Diagnostic Category: [`lint/performance/noUnwantedPolyfillio`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**warning**](/reference/diagnostics#warning). - This rule belongs to the following domains: - [`next`](/linter/domains#next) - Sources: - Same as [`@next/next/no-unwanted-polyfillio`](https://nextjs.org/docs/messages/no-unwanted-polyfillio){
"linter": {
"rules": {
"performance": {
"noUnwantedPolyfillio": "error"
}
}
}
}
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.
<script src='https://polyfill.io/v3/polyfill.min.js?features=AbortController,Object.fromEntries'></script>
import NextScript from 'next/script';
export function MyApp({ Component, pageProps }) {
return <NextScript src='https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.copyWithin' />
}
<>
<script src='https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=AbortController'></script>
<script src='https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=IntersectionObserver'></script>
<Script src='https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=IntersectionObserver' />
<Script src='https://polyfill-fastly.io/v3/polyfill.min.js?features=IntersectionObserver' />
</>