Babel Preset does not provide support on IE11 for Object.assign - "Object doesn't support property or method 'assign'"

Asked 12/3, 2018 at 13:21 Answered 25/6, 2019 at 8:40

Solved reactjs internet-explorer webpack babeljs babel-preset-env

I am using babel-preset-env version - 1.6.1 for my react app, i am getting a error on IE :- Object doesn't support property or method 'assign'

this is my .babelrc :-

{
"presets": [
    "react",
    [
        "env",
        {
            "targets": {
                "browsers": [
                    "last 1 versions",
                    "ie >= 11"
                ]
            },
            "debug": true,
            "modules": "commonjs"
        }
    ]
],
"env": {
    "test": {
        "presets": [
            [
                "babel-preset-env",
                "react"
            ]
        ],
        "plugins": [
            "transform-object-rest-spread",
            "transform-class-properties",
            "transform-runtime",
            "babel-plugin-dynamic-import-node",
            "array-includes",
            "url-search-params-polyfill",
            "transform-object-assign"
        ]
    }
},
"plugins": [
    "transform-object-rest-spread",
    "transform-class-properties",
    "syntax-dynamic-import",
    "transform-runtime",
    "array-includes",
    "url-search-params-polyfill",
    "transform-object-assign"
]

}

i tried these polyfills :-

https://babeljs.io/docs/plugins/transform-object-assign/ https://www.npmjs.com/package/babel-plugin-object-assign

but it didn't work

i am using syntax:-

let a = Object.assign({},obj);

everywhere in my project

i need a polyfill that would work for my project.

Superfuse answered 12/3, 2018 at 13:21 Comment(1)

Possible duplicate of How to merge object in IE 11 – Orangeman 12/3, 2018 at 13:24

You need Babel Polyfill.

Either import it in your entry JS file, or use Webpack.

import "babel-polyfill";

or in webpack.config.js

module.exports = {
  entry: ["babel-polyfill", "./app/main"]
}

NOTE : babel-polyfill Should be imported on very top else It will not work

Rhodia answered 12/3, 2018 at 13:28 Comment(2)

That NOTE there is very important! – Adkins 13/2, 2019 at 18:55

or if you have a multipage app and added react later into legacy code like I did you can include before any of your bundles within either <head> or <body> tags a reference to the script src for the babel polyfill - either link to a cdn that has it or make a local copy to reference – Brahmin 6/5, 2020 at 17:58

Babel Polyfill is outdated as of Babel 7.4.0

(Source)

Please use core-js instead.

import "core-js/stable";
import "regenerator-runtime/runtime";

Or with Webpack:

module.exports = {
  entry: ["core-js/stable", "regenerator-runtime/runtime", "./app/main"]
}

In my case the above webpack config did not work! because I was also lacking a promise polyfill. This is the webpack.config I ended up using:

entry: { 'main': ['core-js/fn/promise', 'core-js/stable/object/assign', './wwwroot/src/app.js'] },

Hirsh answered 25/6, 2019 at 8:40 Comment(3)

Thanks! This worked for our problem with IE11. Question: babeljs.io/docs/en/… "When used alongside @babel/preset-env, If useBuiltIns: 'usage' is specified in .babelrc then do not include @babel/polyfill in either webpack.config.js entry array nor source. Note, @babel/polyfill still needs to be installed." How come core-js has to be in the entry array for IE11? – Roomette 21/11, 2019 at 9:33

Thanks, it worked. But now in 2020, after making below changes, it is working. entry: { 'main': ['core-js-pure/stable/promise', 'core-js/stable/object/assign', './wwwroot/src/app.js'] }, – Whipsaw 30/6, 2020 at 8:59

Thanks. This worked for me both in development and production! – Chromatograph 28/9, 2021 at 12:29

Babel Polyfill is outdated as of Babel 7.4.0

Recommended topics

Hot tags