2

We are making a V2 Docusaurus website: https://www.10studio.tech.

We have just realized that it does not work well in IE, for instance, IE11. The error message is: Object doesn't support property or method 'assign'.

enter image description here

There are some packages to provide with IE compatibility such as core-js, but we don't know how to properly add it to Docusaurus v2.

Does anyone know how to amend this?

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
  • How are you bundling this app? Did you use `create-react-app` or are you using a custom `Webpack` config/etc..? – Matt Oestreich Sep 14 '19 at 16:14
  • Docusaurus uses `Webpack`, probably with this one: https://github.com/facebook/docusaurus/blob/master/packages/docusaurus/src/webpack/client.ts – SoftTimur Sep 14 '19 at 16:34
  • What do you mean probably? It's important to know how you're bundling this app. At any rate, you need polyfills to make this work. See the following link for an example: https://stackoverflow.com/a/56439822/10431732 – Matt Oestreich Sep 14 '19 at 16:39

1 Answers1

1

The error message is telling you that object doesn't have an assign function. assign is a function which apparently is not supported in the browser you are speaking about, so you need to polyfill it. A good example is:

if (!Object.assign) {
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) {
          continue;
        }
        nextSource = Object(nextSource);

        var keysArray = Object.keys(Object(nextSource));
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}

which can be found here: https://gist.github.com/spiralx/68cf40d7010d829340cb

However, even though this will fix the problem you were complaining about, it is highly probable that other problems will occur as well. You might need to polyfill some other stuff as well, you might want to take a look into BabelJS in order to achieve this.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175