NextJS polyfills not loaded before other JS - internet-explorer-11

Question

I am using https://github.com/zeit/next.js/ and had a look at the examples:
https://github.com/zeit/next.js/tree/canary/examples/with-ant-design-less
https://github.com/zeit/next.js/tree/canary/examples/with-redux
https://github.com/zeit/next.js/tree/canary/examples/with-polyfills
I merged the three projects, so that I can use ant design and redux together with polyfill.
Works so far in Chrome, but it seems that the polyfills are not loaded correctly now.
My next.config.js looks like this:
/* eslint-disable */
const withLess = require("#zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");
// Where your antd-custom.less file lives
const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);
module.exports = withLess({
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: themeVariables // make your antd custom effective
},
webpack: (config, {
isServer,
defaultLoaders
}) => {
const originalEntry = config.entry;
config.entry = async() => {
const entries = await originalEntry();
if (
entries["main.js"] &&
!entries["main.js"].includes("./polyfills.js")
) {
entries["main.js"].unshift("./polyfills.js");
}
return entries;
};
config.module.rules.push({
test: /\.scss$/,
use: [
defaultLoaders.babel,
{
loader: require("styled-jsx/webpack").loader,
options: {
type: "scoped",
javascriptEnabled: true
}
},
"sass-loader"
]
});
if (isServer) {
const antStyles = /antd\/.*?\/style.*?/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === "function") {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === "function" ? [] : origExternals)
];
config.module.rules.unshift({
test: antStyles,
use: "null-loader"
});
}
return config;
}
});
My .eslintrc.js looks like this:
module.exports = {
extends: ["airbnb"],
env: {
browser: true
},
parser: "babel-eslint",
rules: {
indent: 0,
"comma-dangle": [
2,
{
arrays: "always-multiline",
objects: "always-multiline",
imports: "always-multiline",
exports: "always-multiline",
functions: "ignore"
}
],
"max-len": 1,
"arrow-parens": 0,
"import/no-named-as-default": 0,
"import/no-extraneous-dependencies": 0,
"no-nested-ternary": 0,
"no-use-before-define": 0,
"react/jsx-props-no-spreading": 0,
"react/prop-types": 1,
"react/no-array-index-key": 1,
"react/no-did-mount-set-state": 0,
"jsx-a11y/label-has-for": [
2,
{
components: ["Label"],
required: {
some: ["nesting", "id"]
},
allowChildren: true
}
],
"jsx-a11y/click-events-have-key-events": 1,
"jsx-a11y/no-noninteractive-element-interactions": 1,
"jsx-a11y/anchor-is-valid": 1,
"jsx-a11y/no-static-element-interactions": 1
}
};
My polyfills.js:
/* eslint no-extend-native: 0 */
// core-js comes with Next.js. So, you can import it like below
import includes from 'core-js/library/fn/string/virtual/includes';
import repeat from 'core-js/library/fn/string/virtual/repeat';
import assign from 'core-js/library/fn/object/assign';
// Add your polyfills (from IE10 is supported by default)
// This files runs at the very beginning (even before React and Next.js core)
String.prototype.includes = includes;
String.prototype.repeat = repeat;
Object.assign = assign;
In IE11 I get:
Object doesn't support property or method 'includes'
Can someone help here ?

Answer 1

I think the one you are missing is actually Array.includes.
I am using nextjs, with core-js#3, and in my polyfills I had to add
import 'core-js/features/object/values';
import 'core-js/features/object/entries';
import 'core-js/features/object/get-own-property-symbols';
import 'core-js/features/array/includes';
after these, I was able to make it work on IE11.