IE11: Cannot refefine non-configurable property 'includes' version: ^3.6.5

[ghost]

When using this version of core-js I get this error in IE11

Package.json ` { "name": "static", "version": "1.0.0", "description": "", "main": "src/App.js", "scripts": { "test": "jest", "start-mock": "cross-env NODE_ENV=mock webpack-dev-server --open", "start": "cross-env NODE_ENV=local webpack-dev-server --open", "build": "cross-env NODE_ENV=production webpack -p --progress", "watch": "aem-front -w ../ui.apps/src/main/content/jcr_root -e /webpack.module/ -e */hot-update.json*", "build:watch": "webpack -p --config webpack.config.js --display-error-details --watch && clientlib" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.10.4", "@babel/preset-env": "^7.10.4", "@babel/preset-react": "^7.10.4", "babel-loader": "^8.1.0", "babili-webpack-plugin": "0.0.11", "bootstrap-sass": "^3.3.7", "classnames": "^2.2.5", "cross-env": "^5.2.0", "css-loader": "^3.6.0", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^6.0.0", "html-loader": "^1.1.0", "html-webpack-plugin": "^4.3.0", "image-webpack-loader": "^3.3.1", "install": "^0.13.0", "jest": "^23.6.0", "jquery": "^3.5.1", "json-server": "^0.16.1", "mini-css-extract-plugin": "^0.9.0", "moment": "^2.27.0", "node-sass": "^4.14.1", "react": "^16.13.1", "react-dom": "^16.13.1", "react-dotdotdot": "^1.0.17", "react-router": "^4.0.0", "react-router-dom": "^4.0.0", "react-slick": "^0.23.1", "sass": "^1.26.9", "sass-loader": "^9.0.1", "slick-carousel": "^1.8.1", "style-loader": "^0.16.1", "url-loader": "^4.1.0", "webpack": "^4.43.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^2.11.5" }, "dependencies": { "@babel/plugin-proposal-decorators": "^7.10.4", "@babel/plugin-transform-runtime": "^7.10.4", "@babel/runtime": "^7.10.4", "aem-front": "^0.3.0", "autoprefixer": "^7.1.6", "base-64": "^0.1.0", "bootstrap": "^4.5.0", "core-js": "^3.4.0", "es2015": "0.0.0", "font-awesome": "^4.7.0", "fsevents": "^2.1.3", "html-react-parser": "^0.4.7", "i18next": "^6.0.1", "i18next-browser-languagedetector": "^2.2.3", "i18next-xhr-backend": "1.5.1", "moment-range": "^4.0.1", "moment-timezone": "^0.5.14", "postcss-loader": "^2.0.6", "prop-types": "latest", "react-add-to-calendar": "^0.1.5", "react-app-polyfill": "^1.0.6", "react-bootstrap": "^1.0.1", "react-bootstrap-date-picker": "^5.1.0", "react-collapse": "^4.0.3", "react-dates": "^21.8.0", "react-i18next": "7.6.1", "react-moment": "^0.6.8", "react-motion": "^0.5.2", "react-platform-js": "0.0.1", "react-select": "^3.1.0", "react-show-more-text": "^1.4.2", "react-tabs": "^2.3.0", "react-with-direction": "^1.3.1", "utf8": "^2.1.2" } }

`

babel.config.js ` module.exports = function (api) { api.cache(false); const presets = [ [ "@babel/preset-react"], [ "@babel/preset-env", { "corejs": { "version":3 }, "useBuiltIns": "usage", "targets": { "edge": "17", "firefox": "60", "chrome": "67", "safari": "11.1", "ie": "11" } } ] ]; const plugins = [ ["@babel/plugin-proposal-decorators",{"decoratorsBeforeExport":true}], ["@babel/plugin-proposal-class-properties"], ["@babel/transform-runtime"]]; return { presets, plugins }; };

`

[schmetzyannick]

I got the same problem. Latest version that works for me: 3.6.1

[Bertijn]

Same problem here!

[JakeChampion]

Could you run this code in your project's bundle and post the result please?

console.log(Array.prototype.includes.toString());
console.log(Object.getOwnPropertyDescriptor(Array.prototype, 'includes'));

[rubanraj54]

Same issue :-(

[JakeChampion]

Same issue :-(

Could you run this code in your project's bundle and post the result please?

console.log(Array.prototype.includes.toString());
console.log(Object.getOwnPropertyDescriptor(Array.prototype, 'includes'));

[rubanraj54]

This is what I see in IE console,

[JakeChampion]

@rubanraj54 My assumption was correct, that is a different Array.prototype.includes implementation to the one within core-js. You will need to hunt down which other dependency is adding an incorrect Array.prototype.includes polyfill.

[rubanraj54]

@rubanraj54 My assumption was correct, that is a different Array.prototype.includes implementation to the one within core-js. You will need to hunt down which other dependency is adding an incorrect Array.prototype.includes polyfill.

Thanks @JakeChampion , I will debug further.

[schmetzyannick]

@JakeChampion At least in my case, the polyfill is set by another package via Object.defineProperty with the default option: configurable = false. In the package, there is a check (for present polyfill) performed before adding the polyfill.

The package isn't adding a wrong polyfill (the implementation is correct), we could discuss whether the way the polyfill is added is correct or not. But anyway, it would be great if core-js would also check for existing polyfills instead of causing an error.

[JakeChampion]

@JakeChampion At least in my case, the polyfill is set by another package via Object.defineProperty with the default option: configurable = false. In the package, there is a check (for present polyfill) performed before adding the polyfill.

The package isn't adding a wrong polyfill (the implementation is correct), we could discuss whether the way the polyfill is added is correct or not. But anyway, it would be great if core-js would also check for existing polyfills instead of causing an error.

That polyfill is incorrect because the method is meant to be configurable, which package is that polyfill from? I'd like to fix the issue there also

[schmetzyannick]

Like my colleague also mentioned in #790, we are working on the same project. It doesn't seem like we can identify the package that is causing problems.

[zloirock]

@JakeChampion already explained what the problem here.

Before core-js you load an incorrect Array#includes polyfill which does not pass core-js feature detection and defines this method as non-writable non-configurable. core-js tries to fix it, but can't do it. Detection of all possible bugs of all 3rd party polyfills is out of scope core-js. It's an issue with this polyfill, but not with core-js.

[danparm]

Not trying to beat a dead horse here but just curious if anyone has discovered what dependency/file/polyfill/Gremlin is causing this issue with core-js. I've been updating several dependencies on a project and when I got around to updating Babel and removing @babel/polyfill I came across this problem in IE 11.

It's also piqued my interest that by running a lower version of core-js3 that there is no problem. Was core-js not polyfilling these array methods in the earlier runs of version 3?

790 for those following that issue too.