Writing in the front

A recent React project required a minimum version 10 compatibility for IE. As a compatible white, very fearful. Now I will summarize the problems encountered in the way of compatibility study and write to share with you. I hope it will be helpful to my friends and welcome your suggestions.

The basic configuration version of this project is as follows:

"react": "^ 16.5.2"."react-dom": "^ 16.5.2".Copy the code

IE10 is compatible with non-style articles

✅ page error: Set/Map is not defined

This problem is mentioned in the React JS environment requirements.

React 16 relies on the Set types Map and Set. If you want to support older browsers and devices that don't offer these capabilities natively (IE < 11, for example) or don't implement specifications (IE 11, for example), consider including a global polyfill in your application library, such as core-js or babel-Polyfill.Copy the code

The solution given is to introduce the specified polyfill in the entry file ahead of time:

import 'core-js/es/map';
import 'core-js/es/set';

import React from 'react';
import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, world! </h1>, document.getElementById('root'));Copy the code

✅ page error: Object.setProtoTypeof undefined problem

Object. SetPrototypeOf is said to support IE9-11, the actual source code is only implemented 11+. Please refer to github.com/paulmillr/e… .

  1. This can be done by registering a setPrototypeOf API method on Object itself.
(function() {
  Object.setPrototypeOf = Object.setPrototypeOf || ({__proto__: []} instanceof Array ? setProtoOf : mixinProperties);

  function setProtoOf(obj, proto) {
    obj.__proto__ = proto;
    return obj;
  }

  function mixinProperties(obj, proto) {
    for (const prop in proto) {
      if (!obj.hasOwnProperty(prop)) {
        obj[prop] = proto[prop];
      }
    }
    return obj;
  }
})();
Copy the code
  1. You can import setPrototypeOf third-party packages and write them in an entry file:
Object.setPrototypeOf = require('setprototypeof');
Copy the code

Objects are not valid as a React child (found: object with keys {? Typeof, type, key, ref, props, _owner}).app does not render.

Cause: Babel-polyfill, React, and reactDOM are introduced in order.

  1. Solution: You can force control in the WebPack Entry configuration of the order in which they are introduced, and make sure babel-Polyfill comes first.
. entry: { babelPolyfill:'babel-polyfill',
    app: 'src/index.js'}... plugins: [ new HtmlWebpackPlugin({ inject:true,
        filename: 'static/index.html',
        template: path.resolve(process.cwd(), 'public'.'index.html'),
        chunks: ['polyfill'.'app'], // Here control their introduction loading order chunksSortMode:'manual',}),]Copy the code

🤔🤔🤔🤔 small white question 🤔 : directly in the entry file to control the introduction of the order of their three, do not know why not, temporarily leave a question, there are know welcome message ha.

  1. Solution: Babel-polyfill can be loaded preferentially in template file index.html using CDN method.
<script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.min.js"></script>
Copy the code

🍒 Tip: here 6.26.0 is the babel-Polyfill version number used in my project. You can use it according to your version number

✅ page error: unable to obtain undefined or null referenced attribute ‘XXX’

Cause: XXX attribute on mou object was used, but this object was not obtained, object is null.

Solution: find the error place, the object judgment processing, the object to get the value will use the XXX attribute above the object.

✅ page error: Only one instance of babel-polyfill is allowed

Reason: The Webpack entry introduces multiple Babel-Polyfills.

Note: If babel-polyfill is introduced in both the WebPackP entry and the entry file, the webpack will automatically ignore the one introduced by the page when it is packaged, so it will not cause this error.

Solution: Check the configuration of WebPack Entry to remove unwanted babel-polyfill introductions.

✅react-intl incompatible with IE10: [react intl] TheIntl APIs must be available in the runtime.

Reason: React-IntL is encapsulated based on INTL, and these apis have compatibility issues in IE10.

Solution: Add Intl’s Polyfill package to solve

<! Importing packages in the entry file will cause webPack to pack large files --> import'intl';
import 'intl/locale-data/jsonp/en';
import 'date-time-format-timezone'; <! --> entry = {polyfill: [path.join(process.cwd(),'./node_modules/intl'),
    path.join(process.cwd(), './node_modules/intl/locale-data/jsonp/en'),
    path.join(process.cwd(), './node_modules/date-time-format-timezone'),],}Copy the code

Reference: github.com/formatjs/re…

IE10 compatible style section

✅IE10 text super long newline problem

/*word-break: break-word; */ Word break is not supported in IE10:break-all;
Copy the code

The ✅IE10 section supports Flex layouts. Do not write inline Flex styles

reporter

Finally, note two small problems encountered in the process of compatibility:

✅ Download problem

Download, the front end will often create a temporary A tag and click to download:

const a = document.createElement('a'); a.href = getUrl; a.click(); / / firefox / / document. The body. The appendChild (a); // a.click(); // document.body.removeChild(a);Copy the code

If you are using Firefox, if the A tag is not added to the DOM, you will not be able to click it. You need to append the A tag to the body.

✅ Internet Explorer interface request cache problem

This problem was discovered because our system always pops out immediately after logging in. But with an F-12, you can land in every time.

This problem is very magical, from the initial thought that the cookei information of the login interface was not brought, to the later suspected that the whatWG-FETCH compatible package of the FETCH request was not introduced, until finally, it was found that the login used the cache return of the last login, resulting in the return state of unlogged.

Conclusion: IE interface request if there is control cache usage, the browser may use the cache automatically, to return to the last time the result of the request, but if you open F12 debugging, open the debug mode, IE will not use the cache, pay attention to this problem, if you don’t want to request using the cache interface, can be solved by add a timestamp.