> ## Documentation Index
> Fetch the complete documentation index at: https://launchdarkly-preview.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Requirements and polyfills

> This topic explains how to add different types of polyfills in the JavaScript SDK.

> For the complete documentation index, see [llms.txt](/llms.txt). For the full documentation snapshot, see [llms-full.txt](/llms-full.txt).

## Overview

This topic explains how to add different types of polyfills in the JavaScript SDK.

Web browsers vary widely in their support of specific features and standards. It is common in JavaScript development to use [polyfills](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill) to ensure the widest possible compatibility. Polyfills are scripts that implement a feature in case it is not built into the browser.

Three features that the LaunchDarkly JavaScript SDK uses that may not be available on every browser are `Promise`, `EventSource`, and `document.querySelectorAll()`.

<Info title="Older versions of the JavaScript SDK require the LaunchDarkly EventSource polyfill">
  In the JavaScript SDK, v3.x and earlier, if you use `REPORT`, enable the [`useReport` configuration option](https://launchdarkly.github.io/js-client-sdk/interfaces/LDOptions.html#useReport), and want to use streaming, then you must use the LaunchDarkly EventSource polyfill. This is true whether or not your browser already supports `EventSource`. To learn more, read [EventSource](#eventsource), below.

  The JavaScript SDK v4.x supports `REPORT` directly. If you enable the [`useReport` configuration option](https://launchdarkly.github.io/js-core/packages/sdk/browser/docs/interfaces/LDOptions.html#useReport), no polyfill or additional configuration is required.
</Info>

## Add a polyfill

For each of these features, there are two ways you can provide the polyfill script.

The first way is to load the polyfill script directly from a CDN that hosts the package, with a `<script>` tag within the `<head>` element of your page. You must put the `<script>` tag for the polyfill *before* any scripts that make use of the LaunchDarkly SDK.

Here is how to load a polyfill script directly from a CDN:

<CodeGroup>
  ```html title="HTML" theme={null}
      <script src="[URL of the polyfill script]"></script>
  ```
</CodeGroup>

If you are using a package manager such as NPM or Yarn, and using `require()` to load modules at runtime, you would first add the polyfill package to your project:

<CodeGroup>
  ```bash title="Shell" theme={null}
      npm install package-name-of-polyfill@package.version.number
  ```
</CodeGroup>

Then, make sure that you `require` the polyfill module prior to initializing the LaunchDarkly client:

<CodeGroup>
  ```js title="JavaScript" theme={null}
      require('package-name-of-polyfill');
  ```
</CodeGroup>

You only need to use one of these methods. You do not need to use both a CDN and a package manager.

## Install polyfills for specific features

Three features that the LaunchDarkly SDK uses that may not be available on every browser are `Promise`, `EventSource`, and `document.querySelectorAll()`. This section describes how to install a polyfill for each of them.

### Promise

The JavaScript SDK relies heavily on JavaScript Promises. [Browsers that do not support Promise](https://caniuse.com/?search=Promise) include Internet Explorer and older versions of Microsoft Edge. If you need to support these browsers, you will need to install a polyfill for Promise, such as [es6-promise](https://github.com/stefanpenner/es6-promise).

To install a polyfill for Promise:

<CodeGroup>
  ```html title="HTML" theme={null}
      <!-- loading polyfill from CDN -->
      <script src="https://unpkg.com/es6-promise@4.2.4/dist/es6-promise.auto.min.js"></script>
  ```

  ```bash title="Shell" theme={null}
      # installing polyfill as a package
      npm install es6-promise@4.2.4
  ```

  ```js title="JavaScript" theme={null}
      // loading polyfill as a package
      require('es6-promise/auto');
  ```
</CodeGroup>

### Event

Source

The JavaScript SDK uses [`EventSource`](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) to provide a live streaming connection to LaunchDarkly, if you have enabled streaming.

By default, the JavaScript SDK client opens a streaming connection if you subscribe to `change` or `change:flag-key` events. You can also open a streaming connection explicitly by setting the `streaming` configuration option or using the `setStreaming` method. **If you never enable streaming, you do not need `EventSource`.** To learn more, read [`streaming`](https://launchdarkly.github.io/js-client-sdk/interfaces/LDOptions.html#streaming).

EventSource is [widely available in modern browsers](https://caniuse.com?search=EventSource). If you need streaming and the older browser versions you are supporting do not provide EventSource, you can install a polyfill.

In the JavaScript SDK, v3.x and earlier, if you enable the JavaScript SDK's [`useReport` configuration option](https://launchdarkly.github.io/js-client-sdk/interfaces/LDOptions.html#useReport) and want to use streaming, you must install the [LaunchDarkly EventSource polyfill](https://github.com/launchdarkly/js-eventsource) to provide streaming support. This is true whether or not your browser already supports `EventSource`.

The JavaScript SDK v4.x supports `REPORT` directly. If you enable the [`useReport` configuration option](https://launchdarkly.github.io/js-core/packages/sdk/browser/docs/interfaces/LDOptions.html#useReport), no polyfill or additional configuration is required.

To install LaunchDarkly's EventSource polyfill:

<CodeGroup>
  ```bash title="Installing LaunchDarkly's EventSource polyfill" theme={null}
      npm install launchdarkly-eventsource
  ```

  ```html title="Loading LaunchDarkly's EventSource polyfill" theme={null}
      <script src="/eventsource-polyfill.js"></script>
  ```
</CodeGroup>

### document.query

SelectorAll()

The JavaScript SDK uses `querySelectorAll` to support `click` events for Experimentation. **If you never use click conversion metrics, you do not need `querySelectorAll`.** To learn more, read [Clicked or tapped conversion metrics](/home/metrics/click).

`querySelectorAll` is widely available in browsers, [except in old versions of Internet Explorer](https://caniuse.com/queryselector). If you want to support these, and you need Experimentation support, you can install a polyfill such as [polyfill-queryselector](https://github.com/cobbdb/polyfill-queryselector).

To install a polyfill for `querySelectorAll`:

<CodeGroup>
  ```html title="HTML" theme={null}
      <!-- loading polyfill from CDN -->
      <script src="https://unpkg.com/polyfill-queryselector@1.0.2/querySelector.js"></script>
  ```

  ```bash title="Shell" theme={null}
      # installing polyfill as a package
      npm install polyfill-queryselector@1.0.2
  ```

  ```js title="JavaScript" theme={null}
      // loading polyfill as a package
      require('polyfill-queryselector');

  ```
</CodeGroup>