Hướng dẫn cấu hình ReactJS NextJS hỗ trợ trình duyệt IE 11

Hiện tại IE 11 có rất ít người dùng, nhưng do yêu cầu của nhiều dự án vẫn cần hỗ trợ IE 11. Tôi sẽ hướng dẫn chi tiết từng bước cấu hình hỗ trợ IE 11 cho ReactJS và NextJS.

1. Browserslist trong package.json

Thêm ie 11 vào cấu hình 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. Sử dụng react-app-polyfill

Nếu bạn đang dùng Create React App, bạn không cần cài thêm gói npm này.

> npm install react-app-polyfill

Lưu ý phải import dòng này ở dòng đầu tiên trong src/index.js:

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

3. Hỗ trợ var() css

> npm install react-app-polyfill

Import và gọi cssVars trong src/index.js:

import cssVars from "css-vars-ponyfill";

cssVars();

4. Hỗ trợ URLSearchParams

Lưu ý phải import dòng này ở dòng đầu tiên trong src/index.js:

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