How to config reactjs nextjs support IE 11

Posted on March 19th, 2021

Currently IE 11 has very few users, but due to the requirement of many projects that need support IE 11. I will detail how to step by step configuring support IE 11 for reactjs and nextjs.

1. Browserslist in package.json

Add ie 11 into browserslist

"browserslist": {
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ],
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version",
        "ie 11"
    ]
}

2. Use react-app-polyfill

If you are using Create React App, you do not need to install this npm.

> npm install react-app-polyfill

Import this must be the first line in src/index.js

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";

3. Support var() css

> npm install react-app-polyfill

Import and call cssVars in src/index.js

import cssVars from "css-vars-ponyfill";

cssVars();

4. Support URLSearchParams

Import this must be the first line in src/index.js

import "core-js/features/url-search-params";