Javascriptservices: Error for IE 11 in dotnet reactredux template

Created on 3 Apr 2017  路  7Comments  路  Source: aspnet/JavaScriptServices

Create a project from : dotnet new reactredux.
Restore and build.
Run in debug it for IE11.

Press button to add in count. You will have a error: in ConfigureStore.tsx, row#32:

Unhandled exception at line 4070, column 5 in http://localhost:61139/dist/main-client.js?v=n3yP7Q4j1qm0uIPtrUDiOecZDo17EIA7qFJ3IjhdZWo

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'assign'

P.S. It works properly in other browsers.

Most helpful comment

You can use core-js polyfills for things like this.

Then you can either import the entire thing for the Browser (if you need lower IE support)

import 'core-js/es6';

Or the individual things that are important to you. (Usually this is the better route)

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
import 'core-js/es6/promise';

All 7 comments

As workaround, I suspect, somewhere in configureStore.ts should be added:

if (typeof Object.assign != 'function') {
        Object.assign = function (target) {
            'use strict';
            if (target == null) {
                throw new TypeError('Cannot convert undefined or null to object');
            }

            target = Object(target);
            for (var index = 1; index < arguments.length; index++) {
                var source = arguments[index];
                if (source != null) {
                    for (var key in source) {
                        if (Object.prototype.hasOwnProperty.call(source, key)) {
                            target[key] = source[key];
                        }
                    }
                }
            }
            return target;
        };
    }

It fixes.

You can use core-js polyfills for things like this.

Then you can either import the entire thing for the Browser (if you need lower IE support)

import 'core-js/es6';

Or the individual things that are important to you. (Usually this is the better route)

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
import 'core-js/es6/reflect';
import 'core-js/es6/promise';

Your solution works like a charm.
But please would you point me where a better place to use this import? I use it in configureStore.ts. But I am not sure it'a great idea.

You could use it at a more global level so it's applied everywhere if you'd like.
You could make a polyfills.ts file, add them in there, and just add it to the top of your boot-client for example.

Thanks, Mark. You are great! Dzenkuju, bardzo.

nie ma prolebmu! 馃槃

Thanks for the answer @MarkPieszak!

Was this page helpful?
0 / 5 - 0 ratings