BrowserSupport.md

Browser Support

nwb's default configuration supports modern browsers. Support for Internet Explorer 9, 10 and 11 requires polyfills.

Default Browser Support

nwb uses the following Browserslist queries by default:

• last 1 chrome version, last 1 firefox version, last 1 safari version for development, when running the development server with nwb serve (or quick commands such as npm react run)
• >0.2%, not dead, not op_mini all for production, when creating a build with nwb build (or quick commands such as npm react build)

Use the links above to check which browsers and versions these queries currently resolve to.

These are used to configure:

• Babel's targets option, so it only transpiles the necessary ECMAScript 2015+ for supported browsers.
• Autoprefixer's overrideBrowserslist option, so it only includes the necessary CSS prefixes for supported browsers.

Configuring Browser Support

If your app needs to support more (or fewer!) browsers, you can tweak browser support settings using browsers config.

Broadening the range of supported browsers will ensure your app works for everone who needs to use it, while narrowing the range may help decrease your bundle sizes, if less code needs to be transpiled and fewer Babel helpers need to be imported.

For example, IE9 is considered a "dead" browser in Browserslist queries, so if you needed to support it, you could specifically enable it in browsers.production config like so:

module.exports = {
  browsers {
    production: '>0.2%, not dead, not op_mini all, ie 9'
  }
}

You can see that IE 9 has now been added to the list of supported browsers.

Polyfilling Missing Language Features

Supporting Internet Explorer

react-app-polyfill provides convenient collection of polyfills for IE9 and IE11.

If you need to support Internet Explorer, install react-app-polyfill and import the appropriate polyfill entry point as the first thing in your app's entry point (usually src/index.js):

npm install react-app-polyfill

import 'react-app-polyfill/ie11'

See react-app-polyfill's Supporting Internet Explorer docs for more details.

Manual Polyfilling

If there are specific language features missing from one of your supported browsers, you can polyfill them manually by installing core-js and importing the appropriate polyfills at the top of your app's entry point (usually src/index.js).

e.g. if you want to use Object.values() in your app, but one of your target browsers doesn't support it:

npm install core-js

import 'core-js/features/object/values'

Automatic Polyfilling

nwb configures @babel/preset-env's useBuiltins: 'entry' option, which will look for a core-js entry point import in your code and replace it with a specific list of polyfill imports to cover the range of supported browsers. See the core-js docs for an example of this feature in action.

To make use of this, import a core-js entry point at the top of your app's entry point (usually src/index.js):

import 'core-js/stable'

react-app-polyfill also provides an entry point for polyfilling stable language features using core-js, so nwb's Babel config supports transpiling react-app-polyfill to allow @babel/preset-env to do its thing:

import 'react-app-polyfill/stable'